মাইক্রোসফট ক্লাউড অ্যাডভোকেটস দ্বারা তৈরি ১২ সপ্তাহের একটি বিস্তৃত কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শিখুন। ২৪টি পাঠে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে কাজ করা প্রকল্পের মাধ্যমে শেখানো হয়, যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেম। কুইজ, আলোচনা এবং ব্যবহারিক অ্যাসাইনমেন্টের মাধ্যমে অংশগ্রহণ করুন। আমাদের কার্যকর প্রকল্প-ভিত্তিক শিক্ষণ পদ্ধতির মাধ্যমে আপনার দক্ষতা বৃদ্ধি করুন এবং জ্ঞান ধরে রাখার ক্ষমতা উন্নত করুন। আজই আপনার কোডিং যাত্রা শুরু করুন!
মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের ১২ সপ্তাহের বিস্তৃত কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শিখুন। ২৪টি পাঠে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে কাজ করা প্রকল্পের মাধ্যমে শেখানো হয়, যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেম। কুইজ, আলোচনা এবং ব্যবহারিক অ্যাসাইনমেন্টের মাধ্যমে অংশগ্রহণ করুন। আমাদের কার্যকর প্রকল্প-ভিত্তিক শিক্ষাদানের মাধ্যমে আপনার দক্ষতা বৃদ্ধি করুন এবং জ্ঞান ধরে রাখার ক্ষমতা উন্নত করুন। আজই আপনার কোডিং যাত্রা শুরু করুন!
আজুর এআই ফাউন্ড্রি ডিসকর্ড কমিউনিটিতে যোগ দিন
[](https://discord.com/invite/ByRwuEEgH4)
**যদি আপনি অতিরিক্ত অনুবাদ ভাষা যোগ করতে চান, তাহলে [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) তালিকাভুক্ত ভাষাগুলো দেখতে পারেন।**
**যদি আপনি অতিরিক্ত ভাষার অনুবাদ চান, সমর্থিত ভাষার তালিকা [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) দেওয়া আছে।**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _আপনি কি একজন শিক্ষার্থী?_
[**স্টুডেন্ট হাব পেজ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করুন যেখানে আপনি বিগিনার রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি বিনামূল্যে সার্টিফিকেট ভাউচার পাওয়ার উপায় খুঁজে পাবেন। এটি এমন একটি পেজ যা আপনি বুকমার্ক করে রাখতে পারেন এবং সময় সময় চেক করতে পারেন কারণ আমরা প্রতি মাসে নতুন কন্টেন্ট যোগ করি।
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করুন যেখানে আপনি শিক্ষার্থীদের জন্য রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি বিনামূল্যে সার্টিফিকেট ভাউচার পাওয়ার উপায় খুঁজে পাবেন। এটি এমন একটি পৃষ্ঠা যা আপনি বুকমার্ক করতে পারেন এবং মাসিকভাবে নতুন কন্টেন্টের জন্য চেক করতে পারেন।
### 📣 ঘোষণা - নতুন গিটহাব কোপাইলট এজেন্ট মোড চ্যালেঞ্জ সম্পন্ন করুন!
### 📣 ঘোষণা - নতুন GitHub Copilot Agent মোড চ্যালেঞ্জ সম্পন্ন করুন!
নতুন চ্যালেঞ্জ যোগ করা হয়েছে, বেশিরভাগ অধ্যায়ে "GitHub Copilot Agent Challenge 🚀" খুঁজুন। এটি একটি নতুন চ্যালেঞ্জ যা আপনি গিটহাব কোপাইলট এবং এজেন্ট মোড ব্যবহার করে সম্পন্ন করতে পারেন। যদি আপনি আগে এজেন্ট মোড ব্যবহার না করে থাকেন, এটি শুধু টেক্সট তৈরি করাই নয়, ফাইল তৈরি এবং সম্পাদনা, কমান্ড চালানো এবং আরও অনেক কিছু করতে সক্ষম।
নতুন চ্যালেঞ্জ যোগ করা হয়েছে, "GitHub Copilot Agent Challenge 🚀" খুঁজুন বেশিরভাগ অধ্যায়ে। এটি একটি নতুন চ্যালেঞ্জ যা আপনি GitHub Copilot এবং Agent মোড ব্যবহার করে সম্পন্ন করতে পারেন। যদি আপনি আগে Agent মোড ব্যবহার না করে থাকেন, এটি শুধু টেক্সট তৈরি করাই নয়, ফাইল তৈরি ও সম্পাদনা, কমান্ড চালানো এবং আরও অনেক কিছু করতে সক্ষম।
### 📣 ঘোষণা - _জেনারেটিভ এআই ব্যবহার করে নতুন প্রকল্প তৈরি করুন_
### 📣 ঘোষণা - _Generative AI ব্যবহার করে নতুন প্রকল্প তৈরি করুন_
নতুন AI অ্যাসিস্ট্যান্ট প্রকল্প যোগ করা হয়েছে, এটি দেখুন [প্রকল্প](./09-chat-project/README.md)
নতুন AI Assistant প্রকল্প যোগ করা হয়েছে, এটি দেখুন [project](./09-chat-project/README.md)
### 📣 ঘোষণা - _নতুন কারিকুলাম_ জাভাস্ক্রিপ্টের জন্য জেনারেটিভ এআই সম্প্রতি প্রকাশিত হয়েছে
### 📣 ঘোষণা - _Generative AI এর জন্য নতুন কারিকুলাম_ জাভাস্ক্রিপ্টে প্রকাশিত হয়েছে
আমাদের নতুন জেনারেটিভ এআই কারিকুলাম মিস করবেন না!
আমাদের নতুন Generative AI কারিকুলাম মিস করবেন না!
শুরু করতে [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) পরিদর্শন করুন!
প্রত্যেকটি পাঠে একটি অ্যাসাইনমেন্ট, জ্ঞান যাচাই এবং একটি চ্যালেঞ্জ অন্তর্ভুক্ত থাকে যা আপনাকে শেখার বিষয়গুলোতে গাইড করবে:
প্রতিটি পাঠে একটি অ্যাসাইনমেন্ট, একটি জ্ঞান যাচাই এবং একটি চ্যালেঞ্জ অন্তর্ভুক্ত থাকে যা আপনাকে শেখার বিষয়গুলোতে গাইড করবে:
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
- টেক্সট এবং ইমেজ অ্যাপ তৈরি
- টেক্সট এবং ইমেজ অ্যাপ জেনারেশন
- সার্চ অ্যাপস
শুরু করতে [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) পরিদর্শন করুন!
শুরু করতে [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) পরিদর্শন করুন!
## 🌱 শুরু করা
> **শিক্ষকগণ**, আমরা এই কারিকুলামটি কীভাবে ব্যবহার করবেন তার জন্য [কিছু পরামর্শ অন্তর্ভুক্ত করেছি](for-teachers.md)। আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) আপনার মতামত জানাতে চাই!
> **শিক্ষকগণ**, আমরা [কিছু পরামর্শ](for-teachers.md) অন্তর্ভুক্ত করেছি এই কারিকুলাম কীভাবে ব্যবহার করবেন। আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) আপনার মতামত জানাতে ভালো লাগবে!
**[শিক্ষার্থীরা](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, প্রতিটি পাঠের জন্য, একটি প্রাক-লেকচার কুইজ দিয়ে শুরু করুন এবং লেকচার মেটেরিয়ালটি পড়ুন, বিভিন্ন কার্যক্রম সম্পন্ন করুন এবং পোস্ট-লেকচার কুইজের মাধ্যমে আপনার বোঝাপড়া যাচাই করুন।
**[শিক্ষার্থীরা](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, প্রতিটি পাঠের জন্য, প্রি-লেকচার কুইজ দিয়ে শুরু করুন এবং লেকচার মেটেরিয়াল পড়ুন, বিভিন্ন কার্যক্রম সম্পন্ন করুন এবং পোস্ট-লেকচার কুইজ দিয়ে আপনার জ্ঞান যাচাই করুন।
আপনার শেখার অভিজ্ঞতা উন্নত করতে, আপনার সহপাঠীদের সাথে সংযোগ স্থাপন করুন এবং একসাথে প্রকল্পগুলিতে কাজ করুন! আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) আলোচনা করার জন্য উৎসাহিত করা হয় যেখানে আমাদের মডারেটর টিম আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে।
আপনার শেখার অভিজ্ঞতা উন্নত করতে, আপনার সহপাঠীদের সাথে প্রকল্পগুলোতে কাজ করুন! আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) আলোচনা উৎসাহিত করা হয় যেখানে আমাদের মডারেটর টিম আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে।
আপনার শিক্ষা আরও এগিয়ে নিতে, আমরা [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করার পরামর্শ দিই যেখানে অতিরিক্ত শিক্ষামূলক উপকরণ পাওয়া যাবে।
আপনার শিক্ষা আরও এগিয়ে নিতে, আমরা [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করার জন্য অত্যন্ত সুপারিশ করি যেখানে অতিরিক্ত শিক্ষার উপকরণ পাওয়া যাবে।
### 📋 আপনার পরিবেশ সেট আপ করা
এই কারিকুলামে একটি প্রস্তুত ডেভেলপমেন্ট পরিবেশ রয়েছে! আপনি শুরু করার সময় এই কারিকুলামটি [Codespace](https://github.com/features/codespaces/) (_একটি ব্রাউজার-ভিত্তিক, ইনস্টলেশনের প্রয়োজন নেই এমন পরিবেশ_) বা আপনার কম্পিউটারে লোকালভাবে একটি টেক্সট এডিটর যেমন [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করে চালাতে পারেন।
এই কারিকুলামের জন্য একটি ডেভেলপমেন্ট পরিবেশ প্রস্তুত রয়েছে! শুরু করার সময় আপনি [Codespace](https://github.com/features/codespaces/) (_একটি ব্রাউজার-ভিত্তিক, কোনো ইনস্টল প্রয়োজন নেই পরিবেশ_) বা আপনার কম্পিউটারে লোকালভাবে একটি টেক্সট এডিটর যেমন [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করতে পারেন।
#### আপনার রিপোজিটরি তৈরি করুন
আপনার কাজ সহজে সংরক্ষণ করার জন্য, আপনার নিজস্ব এই রিপোজিটরির একটি কপি তৈরি করার পরামর্শ দেওয়া হচ্ছে। আপনি এই পেজের উপরের **Use this template** বাটনে ক্লিক করে এটি করতে পারেন। এটি আপনার গিটহাব অ্যাকাউন্টে কারিকুলামের একটি কপি সহ একটি নতুন রিপোজিটরি তৈরি করবে।
আপনার কাজ সহজে সংরক্ষণ করার জন্য, আপনার নিজস্ব এই রিপোজিটরির একটি কপি তৈরি করার সুপারিশ করা হয়। আপনি পৃষ্ঠার শীর্ষে **Use this template** বোতামে ক্লিক করে এটি করতে পারেন। এটি আপনার GitHub অ্যাকাউন্টে কারিকুলামের একটি কপি সহ একটি নতুন রিপোজিটরি তৈরি করবে।
নিচের ধাপগুলো অনুসরণ করুন:
1. **রিপোজিটরি ফর্ক করুন**: এই পেজের উপরের ডানদিকে থাকা "Fork" বাটনে ক্লিক করুন।
আপনার তৈরি করা এই রিপোজিটরির কপিতে, **Code** বাটনে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজ করার জন্য একটি নতুন Codespace তৈরি করবে।
আপনার তৈরি করা এই রিপোজিটরির কপিতে, **Code** বোতামে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজ করার জন্য একটি নতুন Codespace তৈরি করবে।
এই কারিকুলামটি আপনার কম্পিউটারে লোকালভাবে চালানোর জন্য, আপনার একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন। আমাদের প্রথম পাঠ, [প্রোগ্রামিং ভাষা এবং টুলস অফ দ্য ট্রেডের পরিচিতি](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে এই টুলগুলোর বিভিন্ন বিকল্পের মাধ্যমে গাইড করবে যাতে আপনি আপনার জন্য সেরা অপশনটি বেছে নিতে পারেন।
আপনার কম্পিউটারে এই কারিকুলাম চালানোর জন্য, একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন হবে। আমাদের প্রথম পাঠ, [প্রোগ্রামিং ভাষা এবং টুলস অফ দ্য ট্রেডের পরিচিতি](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে এই টুলগুলোর বিভিন্ন বিকল্পের মাধ্যমে গাইড করবে যাতে আপনি আপনার জন্য সেরা বিকল্পটি বেছে নিতে পারেন।
আমাদের সুপারিশ হলো [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করা, যা একটি বিল্ট-ইন [টার্মিনাল](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) সহ আসে। আপনি [এখানে](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code ডাউনলোড করতে পারেন।
আমাদের সুপারিশ হলো [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করা, যা একটি বিল্ট-ইন [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) সহ আসে। আপনি [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) এখান থেকে ডাউনলোড করতে পারেন।
1. আপনার রিপোজিটরি আপনার কম্পিউটারে ক্লোন করুন। আপনি এটি **Code** বাটনে ক্লিক করে এবং URL কপি করে করতে পারেন:
1. আপনার রিপোজিটরি আপনার কম্পিউটারে ক্লোন করুন। আপনি **Code** বোতামে ক্লিক করে URL কপি করে এটি করতে পারেন:
[CodeSpace](./images/createcodespace.png)
তারপর, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) এর [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) খুলুন এবং নিচের কমান্ডটি চালান, `<your-repository-url>`এর জায়গায় আপনার কপি করা URL দিন:
তারপর, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)-এর মধ্যে [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) খুলুন এবং নিচের কমান্ডটি চালান, যেখানে `<your-repository-url>` আপনার কপি করা URL দিয়ে প্রতিস্থাপন করুন:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code-এ ফোল্ডারটি খুলুন। আপনি এটি **File** > **Open Folder**-এ ক্লিক করে এবং ক্লোন করা ফোল্ডারটি নির্বাচন করে করতে পারেন।
2. Visual Studio Code-এ ফোল্ডারটি খুলুন। আপনি **File** > **Open Folder**-এ ক্লিক করে এবং ক্লোন করা ফোল্ডারটি নির্বাচন করে এটি করতে পারেন।
> Visual Studio Code-এর জন্য সুপারিশকৃত এক্সটেনশন:
> সুপারিশকৃত Visual Studio Code এক্সটেনশন:
>
> * [লাইভ সার্ভার](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML পেজগুলোকে Visual Studio Code-এ প্রিভিউ করার জন্য
> * [কোপাইলট](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - কোড দ্রুত লেখার জন্য সাহায্য করে
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-এর মধ্যে HTML পৃষ্ঠাগুলো প্রিভিউ করার জন্য
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - কোড দ্রুত লিখতে সাহায্য করে
> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারে অন্তর্ভুক্ত, মোট ৪৮টি কুইজ, প্রতিটিতে তিনটি প্রশ্ন। এগুলো [এখানে](https://ff-quizzes.netlify.app/web/) পাওয়া যাবে। কুইজ অ্যাপটি লোকাল বা Azure-এ ডিপ্লয় করে চালানো যেতে পারে; `quiz-app` ফোল্ডারে নির্দেশনা অনুসরণ করুন।
> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারে অন্তর্ভুক্ত, মোট ৪৮টি কুইজ, প্রতিটিতে তিনটি প্রশ্ন। এগুলো [এখানে](https://ff-quizzes.netlify.app/web/) পাওয়া যাবে। Quiz-app লোকালভাবে চালানো বা Azure-এ ডিপ্লয় করা যেতে পারে; `quiz-app` ফোল্ডারের নির্দেশনা অনুসরণ করুন।
## 🗃️ পাঠসমূহ
| | প্রকল্পের নাম | শেখানো ধারণা | শেখার লক্ষ্য | লিঙ্কযুক্ত পাঠ | লেখক |
| | প্রকল্পের নাম | শেখানো ধারণা | শেখার উদ্দেশ্য | লিঙ্কযুক্ত পাঠ | লেখক |
| 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) | ক্রিস্টোফার |
| 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) | HTML এর ব্যবহার | একটি অনলাইন টেরারিয়াম তৈরি করার জন্য HTML তৈরি করুন, লেআউট তৈরি করার উপর ফোকাস | [HTMLএর পরিচিতি](./3-terrarium/1-intro-to-html/README.md) | জেন |
| 09 | [টেরারিয়াম](./3-terrarium/solution/README.md) | CSS এর ব্যবহার | অনলাইন টেরারিয়াম স্টাইল করার জন্য CSS তৈরি করুন, CSS এর বেসিক এবং পেজকে রেসপন্সিভ করার উপর ফোকাস | [CSS এর পরিচিতি](./3-terrarium/2-intro-to-css/README.md) | জেন |
| 10 | [টেরারিয়াম](./3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসেবে কাজ করার জন্য জাভাস্ক্রিপ্ট তৈরি করুন, ক্লোজার এবং DOM ম্যানিপুলেশনের উপর ফোকাস | [জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন](./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 কল করা এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদান তৈরি করুন যা লোকাল স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে API কল করে | [API, ফর্ম এবং লোকাল স্টোরেজ](./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 টেমপ্লেট ব্যবহার করে একটি মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচার তৈরি করার পদ্ধতি শিখুন | [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) | ইয়োহান |
| 25 | [ব্রাউজার/VS কোড](../../8-code-editor) | VS কোডের সাথে কাজ করা | কোড এডিটর ব্যবহার করার পদ্ধতি শিখুন| [VS কোড এডিটর ব্যবহার করুন](./8-code-editor/1-using-a-code-editor/README.md) | ক্রিস |
| 26 | [AI অ্যাসিস্ট্যান্ট](./9-chat-project/README.md) | AI এর সাথে কাজ করা | নিজের AI অ্যাসিস্ট্যান্ট তৈরি করার পদ্ধতি শিখুন | [AI অ্যাসিস্ট্যান্ট প্রকল্প](./9-chat-project/README.md) | ক্রিস |
| 01 | শুরু করা | প্রোগ্রামিং এবং টুলসের পরিচিতি | বেশিরভাগ প্রোগ্রামিং ভাষার মৌলিক ভিত্তি এবং পেশাদার ডেভেলপারদের কাজের জন্য সহায়ক সফটওয়্যার সম্পর্কে জানুন | [প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | শুরু করা | GitHub-এর মৌলিক বিষয়, দল নিয়ে কাজ করা | আপনার প্রকল্পে GitHub কীভাবে ব্যবহার করবেন, কোড বেসে অন্যদের সাথে সহযোগিতা করবেন | [GitHub-এর পরিচিতি](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | শুরু করা | অ্যাক্সেসিবিলিটি | ওয়েব অ্যাক্সেসিবিলিটির মৌলিক বিষয়গুলি শিখুন | [অ্যাক্সেসিবিলিটির মৌলিক বিষয়](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS মৌলিক বিষয় | ফাংশন এবং মেথড | অ্যাপ্লিকেশনের লজিক প্রবাহ পরিচালনা করতে ফাংশন এবং মেথড সম্পর্কে জানুন | [ফাংশন এবং মেথড](./2-js-basics/2-functions-methods/README.md) | Jasmine এবং Christopher |
| 06 | JS মৌলিক বিষয় | জাভাস্ক্রিপ্ট দিয়ে সিদ্ধান্ত নেওয়া | সিদ্ধান্ত নেওয়ার পদ্ধতি ব্যবহার করে আপনার কোডে শর্ত তৈরি করতে শিখুন | [সিদ্ধান্ত নেওয়া](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS মৌলিক বিষয় | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [টেরারিয়াম](./3-terrarium/solution/README.md) | HTML অনুশীলনে | একটি অনলাইন টেরারিয়াম তৈরি করতে HTML তৈরি করুন, লেআউট তৈরি করার উপর ফোকাস | [HTML-এর পরিচিতি](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [টেরারিয়াম](./3-terrarium/solution/README.md) | CSS অনুশীলনে | অনলাইন টেরারিয়াম স্টাইল করতে CSS তৈরি করুন, CSS-এর মৌলিক বিষয়গুলির উপর ফোকাস সহ পৃষ্ঠাকে রেসপন্সিভ করুন | [CSS-এর পরিচিতি](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [টেরারিয়াম](./3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে একটি ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কার্যকর করতে জাভাস্ক্রিপ্ট তৈরি করুন, ক্লোজার এবং DOM ম্যানিপুলেশনের উপর ফোকাস | [জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [টাইপিং গেম](./4-typing-game/solution/README.md) | টাইপিং গেম তৈরি করুন | কীবোর্ড ইভেন্ট ব্যবহার করে আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানোর পদ্ধতি শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ | ব্রাউজার কীভাবে কাজ করে, তাদের ইতিহাস এবং একটি ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি তৈরি করার পদ্ধতি শিখুন | [ব্রাউজার সম্পর্কে](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি করা, একটি API কল করা এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | লোকাল স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে একটি API কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদান তৈরি করুন | [API, ফর্ম এবং লোকাল স্টোরেজ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশন সম্পর্কে জানুন | [ব্যাকগ্রাউন্ড টাস্ক এবং পারফরম্যান্স](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [স্পেস গেম](./6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন ব্যবহার করে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে জানুন, একটি গেম তৈরি করার প্রস্তুতি হিসাবে | [উন্নত গেম ডেভেলপমেন্টের পরিচিতি](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [স্পেস গেম](./6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস API সম্পর্কে জানুন, যা স্ক্রিনে উপাদান আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [স্পেস গেম](./6-space-game/solution/README.md) | স্ক্রিনে উপাদান সরানো | কার্টেসিয়ান কোঅর্ডিনেট এবং ক্যানভাস API ব্যবহার করে উপাদান কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [উপাদান সরানো](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [স্পেস গেম](./6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে একে অপরের সাথে সংঘর্ষ করতে এবং প্রতিক্রিয়া জানাতে তৈরি করুন এবং গেমের পারফরম্যান্স নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [স্পেস গেম](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা এবং পারফরম্যান্সের উপর ভিত্তি করে গাণিতিক হিসাব করুন | [স্কোর রাখা](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [স্পেস গেম](./6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু করা | গেম শেষ করা এবং পুনরায় শুরু করার পদ্ধতি শিখুন, যার মধ্যে অ্যাসেট পরিষ্কার করা এবং ভেরিয়েবল মান পুনরায় সেট করা অন্তর্ভুক্ত | [শেষ করার শর্ত](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে একটি মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচার তৈরি করার কাঠামো তৈরি করার পদ্ধতি শিখুন | [HTML টেমপ্লেট এবং রুট](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | ফর্ম তৈরি এবং ভ্যালিডেশন রুটিন পরিচালনা সম্পর্কে জানুন | [ফর্ম](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ডেটা সংগ্রহ এবং ব্যবহারের পদ্ধতি | আপনার অ্যাপে ডেটা কীভাবে প্রবাহিত হয়, কীভাবে এটি সংগ্রহ করবেন, সংরক্ষণ করবেন এবং নিষ্পত্তি করবেন | [ডেটা](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্টের ধারণা | আপনার অ্যাপ কীভাবে স্টেট ধরে রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করবেন তা শিখুন | [স্টেট ম্যানেজমেন্ট](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ব্রাউজার/VScode কোড](../../8-code-editor) | VScode নিয়ে কাজ | কোড এডিটর ব্যবহার করা শিখুন| [VScode কোড এডিটর ব্যবহার করুন](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI অ্যাসিস্ট্যান্ট](./9-chat-project/README.md) | AI নিয়ে কাজ | নিজের AI অ্যাসিস্ট্যান্ট তৈরি করা শিখুন | [AI অ্যাসিস্ট্যান্ট প্রকল্প](./9-chat-project/README.md) | Chris |
## 🏫 শিক্ষাদান পদ্ধতি
আমাদের পাঠ্যক্রম দুটি মূল শিক্ষাদান পদ্ধতির উপর ভিত্তি করে তৈরি:
আমাদের পাঠ্যক্রম দুটি মূল শিক্ষাদান নীতির উপর ভিত্তি করে তৈরি:
* প্রকল্প-ভিত্তিক শিক্ষা
* ঘন ঘন কুইজ
এই প্রোগ্রামটি জাভাস্ক্রিপ্ট, HTML এবং CSS এর মৌলিক বিষয়গুলো শেখায়, পাশাপাশি বর্তমান ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ টুল এবং কৌশলগুলোও শেখায়। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে-কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্ত ভিত্তি অর্জন করবে।
এই প্রোগ্রামটি জাভাস্ক্রিপ্ট, HTML এবং CSS-এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি আজকের ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ টুল এবং কৌশলগুলি। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে-কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্তিশালী ধারণা অর্জন করবে।
> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ [Microsoft Learn](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) এ একটি [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে নিতে পারেন!
> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে Microsoft Learn-এ নিতে পারেন!
পাঠ্যক্রমটি প্রকল্পের সাথে সামঞ্জস্য রেখে তৈরি করার মাধ্যমে শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় করা হয়েছে এবং ধারণাগুলোর সংরক্ষণ ক্ষমতা বৃদ্ধি পাবে। আমরা জাভাস্ক্রিপ্ট বেসিকের উপর কয়েকটি স্টার্টার পাঠ লিখেছি ধারণাগুলো পরিচিত করানোর জন্য, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহের একটি ভিডিওর সাথে যুক্ত, যার কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন।
প্রকল্পের সাথে সামঞ্জস্য রেখে বিষয়বস্তু নিশ্চিত করার মাধ্যমে শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় করা হয়েছে এবং ধারণার ধারণক্ষমতা বৃদ্ধি পাবে। আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি পরিচিত করার জন্য কয়েকটি স্টার্টার পাঠ লিখেছি, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহের একটি ভিডিওর সাথে যুক্ত, যার কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন।
এছাড়াও, ক্লাসের আগে একটি কম ঝুঁকির কুইজ শিক্ষার্থীর একটি বিষয়ের প্রতি মনোযোগ স্থাপন করে, এবং ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণা সংরক্ষণ নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদারভাবে ডিজাইন করা হয়েছে এবং এটি সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলো ছোট থেকে শুরু করে এবং ১২ সপ্তাহের চক্রের শেষে ক্রমশ জটিল হয়ে ওঠে।
এছাড়াও, একটি ক্লাসের আগে একটি কম ঝুঁকির কুইজ শিক্ষার্থীর একটি বিষয় শেখার উদ্দেশ্য নির্ধারণ করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণক্ষমতা নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হতে ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট থেকে শুরু হয় এবং ১২-সপ্তাহের চক্রের শেষে ক্রমশ জটিল হয়ে ওঠে।
যদিও আমরা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলো পরিচিত করানো থেকে ইচ্ছাকৃতভাবে বিরত থেকেছি, একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে একজন ওয়েব ডেভেলপার হিসেবে প্রয়োজনীয় মৌলিক দক্ষতাগুলো শেখানোর জন্য, এই পাঠ্যক্রমটি সম্পন্ন করার পর একটি ভালো পরবর্তী পদক্ষেপ হতে পারে Node.js সম্পর্কে শেখা, যা আরেকটি ভিডিও সংগ্রহে পাওয়া যাবে: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
যদিও আমরা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি পরিচয় করানোর বিষয়টি এড়িয়ে গেছি, ওয়েব ডেভেলপার হিসাবে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে প্রয়োজনীয় মৌলিক দক্ষতার উপর মনোযোগ কেন্দ্রীভূত করতে, এই পাঠ্যক্রমটি সম্পন্ন করার একটি ভাল পরবর্তী পদক্ষেপ হবে Node.js সম্পর্কে শেখা, একটি ভিডিও সংগ্রহের মাধ্যমে: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
> আমাদের [Code of Conduct](CODE_OF_CONDUCT.md) এবং [Contributing](CONTRIBUTING.md) নির্দেশিকা দেখুন। আমরা আপনার গঠনমূলক মতামতকে স্বাগত জানাই!
## 🧭 অফলাইন অ্যাক্সেস
আপনি [Docsify](https://docsify.js.org/#/) ব্যবহার করে এই ডকুমেন্টেশনটি অফলাইনে চালাতে পারেন। এই রিপোটি ফর্ক করুন, আপনার লোকাল মেশিনে [Docsify ইনস্টল করুন](https://docsify.js.org/#/quickstart), এবং তারপর এই রিপোর রুট ফোল্ডারে `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে পোর্ট ৩০০০-এ পরিবেশন করা হবে: `localhost:3000`।
আপনি [Docsify](https://docsify.js.org/#/) ব্যবহার করে এই ডকুমেন্টেশনটি অফলাইনে চালাতে পারেন। এই রিপোটি ফর্ক করুন, আপনার লোকাল মেশিনে [Docsify ইনস্টল করুন](https://docsify.js.org/#/quickstart), এবং তারপর এই রিপোর রুট ফোল্ডারে `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে পোর্ট ৩০০০-এ পরিবেশন করা হবে: `localhost:3000`।
## 📘 পিডিএফ
## 📘 PDF
সমস্ত পাঠের একটি পিডিএফ [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) পাওয়া যাবে।
সমস্ত পাঠের একটি PDF [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) পাওয়া যাবে।
## 🎒 অন্যান্য কোর্স
আমাদের টিম অন্যান্য কোর্সও তৈরি করে! দেখুন:
আমাদের দল অন্যান্য কোর্স তৈরি করে! দেখুন:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
যদি আপনি আটকে যান বা AI অ্যাপ তৈরি করার বিষয়ে কোনো প্রশ্ন থাকে, তাহলে যোগ দিন:
যদি আপনি আটকে যান বা এআই অ্যাপ তৈরি করার বিষয়ে কোনো প্রশ্ন থাকে, এমসিপি নিয়ে আলোচনা করতে অন্যান্য শিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সাথে যোগ দিন। এটি একটি সহায়ক কমিউনিটি যেখানে প্রশ্ন করা স্বাগত এবং জ্ঞান বিনামূল্যে ভাগ করা হয়।
[](https://aka.ms/foundry/discord)
যদি কোনো পণ্য সম্পর্কিত মতামত বা ত্রুটি থাকে, তাহলে ভিজিট করুন:
যদি কোনো পণ্য সম্পর্কিত মতামত বা ত্রুটি থাকে, তাহলে এখানে যান:
[](https://aka.ms/foundry/forum)
এই রিপোজিটরি MIT লাইসেন্সের অধীনে লাইসেন্সকৃত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন।
এই রিপোজিটরি MIT লাইসেন্সের অধীনে লাইসেন্সকৃত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন।
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিক অনুবাদের চেষ্টা করি, তবে দয়া করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় থাকা সংস্করণটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই।
Olá, futuro desenvolvedor! 👋 Pronto para se juntar a milhões de programadores ao redor do mundo? Estou genuinamente empolgado para te apresentar ao GitHub– pense nele como uma rede social para programadores, mas em vez de compartilhar fotos do seu almoço, compartilhamos código e construímos coisas incríveis juntos!
Olá, futuro desenvolvedor! 👋 Pronto para se juntar a milhões de programadores ao redor do mundo? Estou genuinamente animado para apresentar o GitHub a você– pense nele como uma rede social para programadores, mas em vez de compartilhar fotos do seu almoço, compartilhamos código e construímos coisas incríveis juntos!
Aqui está algo que me deixa impressionado: todos os aplicativos no seu celular, todos os sites que você visita e a maioria das ferramentas que você aprenderá a usar foram criados por equipes de desenvolvedores colaborando em plataformas como o GitHub. Aquele aplicativo de música que você adora? Alguém como você contribuiu para ele. Aquele jogo que você não consegue parar de jogar? Sim, provavelmente foi construído com colaboração no GitHub. E agora VOCÊ vai aprender como fazer parte dessa comunidade incrível!
Eu sei que isso pode parecer muita coisa no começo – eu mesmo lembro de olhar para minha primeira página no GitHub e pensar "O que tudo isso significa?". Mas aqui está o segredo: todo desenvolvedor começou exatamente onde você está agora. Até o final desta aula, você terá seu próprio repositório no GitHub (pense nele como sua vitrine pessoal de projetos na nuvem) e saberá como salvar seu trabalho, compartilhá-lo com outros e até contribuir para projetos que milhões de pessoas usam.
Eu sei que isso pode parecer muito no começo – eu mesmo lembro de olhar para minha primeira página no GitHub e pensar "O que tudo isso significa?". Mas aqui está o segredo: todo desenvolvedor começou exatamente onde você está agora. Até o final desta lição, você terá seu próprio repositório no GitHub (pense nele como sua vitrine pessoal de projetos na nuvem) e saberá como salvar seu trabalho, compartilhá-lo com outros e até contribuir para projetos que milhões de pessoas usam.
Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressão – apenas você, eu e algumas ferramentas muito legais que estão prestes a se tornar suas melhores amigas!
@ -22,21 +22,20 @@ Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressão –
```mermaid
journey
title Your GitHub Adventure Today
section Setup
Install Git: 4: You
Create Account: 5: You
First Repository: 5: You
section Master Git
Local Changes: 4: You
Commits & Pushes: 5: You
Branching: 4: You
section Collaborate
Fork Projects: 4: You
Pull Requests: 5: You
Open Source: 5: You
title Sua Aventura no GitHub Hoje
section Configuração
Instalar Git: 4: Você
Criar Conta: 5: Você
Primeiro Repositório: 5: Você
section Dominar o Git
Alterações Locais: 4: Você
Commits & Pushes: 5: Você
Ramificação: 4: Você
section Colaborar
Fazer Fork de Projetos: 4: Você
Pull Requests: 5: Você
Código Aberto: 5: Você
```
## Quiz Pré-Aula
[Quiz pré-aula](https://ff-quizzes.netlify.app)
@ -44,9 +43,9 @@ journey
Antes de mergulharmos nas partes realmente empolgantes, vamos preparar seu computador para um pouco de mágica do GitHub! Pense nisso como organizar seus materiais de arte antes de criar uma obra-prima – ter as ferramentas certas prontas torna tudo muito mais fácil e divertido.
Vou te guiar por cada etapa de configuração pessoalmente, e prometo que não é tão intimidador quanto pode parecer à primeira vista. Se algo não fizer sentido de imediato, isso é completamente normal! Eu lembro de configurar meu primeiro ambiente de desenvolvimento e sentir como se estivesse tentando decifrar hieróglifos antigos. Todo desenvolvedor já esteve exatamente onde você está agora, se perguntando se está fazendo certo. Spoiler: se você está aqui aprendendo, já está fazendo certo! 🌟
Vou te guiar por cada etapa de configuração pessoalmente, e prometo que não é tão intimidador quanto parece à primeira vista. Se algo não fizer sentido de imediato, isso é completamente normal! Eu lembro de configurar meu primeiro ambiente de desenvolvimento e sentir como se estivesse tentando decifrar hieróglifos antigos. Todo desenvolvedor já esteve exatamente onde você está agora, se perguntando se está fazendo certo. Spoiler: se você está aqui aprendendo, já está fazendo certo! 🌟
Nesta aula, vamos abordar:
Nesta lição, vamos abordar:
- como rastrear o trabalho que você faz no seu computador
- como trabalhar em projetos com outras pessoas
@ -56,9 +55,9 @@ Nesta aula, vamos abordar:
Vamos preparar seu computador para um pouco de mágica do GitHub! Não se preocupe – essa configuração é algo que você só precisa fazer uma vez, e depois estará pronto para toda a sua jornada de programação.
Tudo bem, vamos começar com a base! Primeiro, precisamos verificar se o Git já está instalado no seu computador. O Git é basicamente como ter um assistente superinteligente que lembra de cada mudança que você faz no seu código – muito melhor do que apertar Ctrl+S freneticamente a cada dois segundos (todos já passamos por isso!).
Certo, vamos começar com a base! Primeiro, precisamos verificar se o Git já está instalado no seu computador. O Git é basicamente como ter um assistente superinteligente que lembra de cada mudança que você faz no seu código – muito melhor do que apertar Ctrl+S freneticamente a cada dois segundos (todos já passamos por isso!).
Vamos ver se o Git já está instalado digitando este comando mágico no seu terminal:
Vamos ver se o Git já está instalado digitando este comando mágico no terminal:
`git --version`
Se o Git ainda não estiver lá, sem problemas! Basta acessar [download Git](https://git-scm.com/downloads) e baixá-lo. Depois de instalá-lo, precisamos apresentar o Git a você adequadamente:
@ -85,13 +84,13 @@ Acesse [github.com](https://github.com/) e crie uma conta, se ainda não tiver u
### Preparação
Você precisará de uma pasta com um projeto de código no seu computador (notebook ou PC) e de um repositório público no GitHub, que servirá como exemplo de como contribuir para os projetos de outras pessoas.
Você precisará de uma pasta com um projeto de código no seu computador (laptop ou PC) e de um repositório público no GitHub, que servirá como exemplo de como contribuir para os projetos de outras pessoas.
### Mantendo Seu Código Seguro
Vamos falar sobre segurança por um momento – mas não se preocupe, não vamos te sobrecarregar com coisas assustadoras! Pense nessas práticas de segurança como trancar seu carro ou sua casa. São hábitos simples que se tornam automáticos e mantêm seu trabalho protegido.
Vamos falar sobre segurança por um momento – mas não se preocupe, não vamos te sobrecarregar com coisas assustadoras! Pense nessas práticas de segurança como trancar seu carro ou sua casa. São hábitos simples que se tornam naturais e mantêm seu trabalho protegido.
Vamos te mostrar as formas modernas e seguras de trabalhar com o GitHub desde o início. Assim, você desenvolverá bons hábitos que te servirão bem ao longo da sua carreira de programação.
Vamos mostrar as maneiras modernas e seguras de trabalhar com o GitHub desde o início. Assim, você desenvolverá bons hábitos que serão úteis ao longo de sua carreira de programação.
Ao trabalhar com o GitHub, é importante seguir as melhores práticas de segurança:
@ -107,10 +106,10 @@ Ao trabalhar com o GitHub, é importante seguir as melhores práticas de seguran
Ok, AGORA é onde as coisas ficam realmente empolgantes! 🎉 Vamos aprender como rastrear e gerenciar seu código como os profissionais fazem, e honestamente, essa é uma das minhas coisas favoritas de ensinar porque é uma mudança de jogo.
Agora, é aqui que as coisas ficam realmente emocionantes! 🎉 Vamos aprender como rastrear e gerenciar seu código como os profissionais fazem, e honestamente, essa é uma das minhas coisas favoritas de ensinar porque é uma mudança de jogo.
Imagine isso: você está escrevendo uma história incrível e quer acompanhar cada rascunho, cada edição brilhante e cada momento de "espera, isso é genial!" ao longo do caminho. É exatamente isso que o Git faz pelo seu código! É como ter o caderno mais incrível que viaja no tempo e lembra de TUDO – cada tecla pressionada, cada mudança, cada momento de "ops, isso quebrou tudo" que você pode desfazer instantaneamente.
Vou ser honesto – isso pode parecer um pouco demais no começo. Quando comecei, pensei "Por que não posso simplesmente salvar meus arquivos como sempre?". Mas confie em mim: uma vez que o Git fizer sentido para você (e vai!), você terá um daqueles momentos de lâmpada acesa em que pensa "Como eu CONSEGUI programar sem isso?". É como descobrir que você pode voar quando esteve andando por aí a vida toda!
Vou ser honesto – isso pode parecer esmagador no começo. Quando comecei, pensei "Por que não posso simplesmente salvar meus arquivos como de costume?". Mas confie em mim: uma vez que o Git fizer sentido para você (e vai!), você terá um daqueles momentos de lâmpada acesa em que pensa "Como eu CONSEGUIA programar sem isso?". É como descobrir que você pode voar quando estava andando por aí a vida toda!
Digamos que você tem uma pasta local com algum projeto de código e quer começar a rastrear seu progresso usando o git – o sistema de controle de versão. Algumas pessoas comparam usar o git a escrever uma carta de amor para seu futuro eu. Ao ler suas mensagens de commit dias, semanas ou meses depois, você será capaz de lembrar por que tomou uma decisão ou "reverter" uma mudança – isso é, quando você escreve boas "mensagens de commit".
Digamos que você tenha uma pasta local com algum projeto de código e queira começar a rastrear seu progresso usando o git - o sistema de controle de versão. Algumas pessoas comparam usar git a escrever uma carta de amor para seu futuro eu. Ao ler suas mensagens de commit dias, semanas ou meses depois, você será capaz de lembrar por que tomou uma decisão ou "reverter" uma mudança – isso é, quando você escreve boas "mensagens de commit".
```mermaid
flowchart TD
A[📁 Your Project Files] --> B{Is it a Git Repository?}
B -->|No| C[git init]
B -->|Yes| D[Make Changes]
A[📁 Seus Arquivos do Projeto] --> B{É um Repositório Git?}
B -->|Não| C[git init]
B -->|Sim| D[Fazer Alterações]
C --> D
D --> E[git add .]
E --> F["git commit -m 'message'"]
E --> F["git commit -m 'mensagem'"]
F --> G[git push]
G --> H[🌟 Code on GitHub!]
G --> H[🌟 Código no GitHub!]
H --> I{Want to collaborate?}
I -->|Yes| J[Fork & Clone]
I -->|No| D
J --> K[Create Branch]
K --> L[Make Changes]
H --> I{Quer colaborar?}
I -->|Sim| J[Fork & Clone]
I -->|Não| D
J --> K[Criar Branch]
K --> L[Fazer Alterações]
L --> M[Pull Request]
M --> N[🎉 Contributing!]
M --> N[🎉 Contribuindo!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Tarefa: Crie Seu Primeiro Repositório!
> 🎯 **Sua Missão (e estou tão empolgado por você!)**: Vamos criar seu primeiro repositório no GitHub juntos! Quando terminarmos aqui, você terá seu próprio cantinho na internet onde seu código vive, e terá feito seu primeiro "commit" (isso é como os desenvolvedores chamam salvar seu trabalho de forma muito inteligente).
> 🎯 **Sua Missão (e estou tão animado por você!)**: Vamos criar seu primeiro repositório no GitHub juntos! Quando terminarmos aqui, você terá seu próprio cantinho na internet onde seu código vive, e terá feito seu primeiro "commit" (isso é como os desenvolvedores chamam salvar seu trabalho de uma maneira muito inteligente).
>
> Este é um momento realmente especial – você está prestes a se juntar oficialmente à comunidade global de desenvolvedores! Eu ainda lembro da emoção de criar meu primeiro repositório e pensar "Uau, eu realmente estou fazendo isso!"
Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessário em cada parte – não há prêmio por correr, e prometo que cada etapa fará sentido. Lembre-se, todo superastro da programação que você admira já esteve exatamente onde você está, prestes a criar seu primeiro repositório. Que incrível isso, não é?
Vamos percorrer essa aventura juntos, passo a passo. Leve seu tempo em cada parte – não há prêmio por apressar, e prometo que cada etapa fará sentido. Lembre-se, todo superastro da programação que você admira já esteve exatamente onde você está, prestes a criar seu primeiro repositório. Que incrível, né?
> Confira o vídeo
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Vamos Fazer Isso Juntos:**
1. **Crie seu repositório no GitHub**. Acesse GitHub.com e procure aquele botão verde brilhante **New** (ou o sinal de **+** no canto superior direito). Clique nele e selecione **New repository**.
1. **Crie seu repositório no GitHub**. Acesse GitHub.com e procure aquele botão verde brilhante **New** (ou o sinal **+** no canto superior direito). Clique nele e selecione **New repository**.
Aqui está o que fazer:
1. Dê um nome ao seu repositório – escolha algo significativo para você!
1. Adicione uma descrição, se quiser (isso ajuda os outros a entenderem sobre o que é seu projeto)
1. Decida se quer que ele seja público (todos podem ver) ou privado (somente você)
1. Decida se quer que ele seja público (todos podem ver) ou privado (apenas para você)
1. Recomendo marcar a caixa para adicionar um arquivo README – é como a página inicial do seu projeto
1. Clique em **Create repository** e comemore – você acabou de criar seu primeiro repositório! 🎉
@ -248,10 +246,10 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessário e
**Mudou de ideia?** Sem problemas! Você pode remover arquivos da preparação assim:
```bash
# Unstage everything
# Desfazer a preparação de tudo
git reset
# Unstage just one file
# Desfazer a preparação de apenas um arquivo
git reset [file name]
```
@ -266,7 +264,7 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessário e
**🎉 Parabéns! Você acabou de fazer seu primeiro commit!**
**Aqui está o que acabou de acontecer:**
- O Git tirou um "instantâneo" de todos os seus arquivos preparados neste exato momento
- O Git tirou um "instantâneo" de todos os arquivos preparados neste exato momento
- Sua mensagem de commit "first commit" explica sobre o que é este ponto de salvamento
- O Git deu a este instantâneo um ID único para que você sempre possa encontrá-lo depois
- Você oficialmente começou a rastrear o histórico do seu projeto!
@ -282,12 +280,13 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessário e
```
(Substitua essa URL pela URL real do seu repositório!)
**O que acabamos de fazer:**
- Criamos uma conexão entre seu projeto local e seu repositório no GitHub.
- "Origin" é apenas um apelido para o seu repositório no GitHub – é como adicionar um contato no seu celular.
- Agora seu Git local sabe para onde enviar seu código quando você estiver pronto para compartilhá-lo.
💡 **Forma mais fácil**: Se você tiver o GitHub CLI instalado, pode fazer isso com um único comando:
**O que acabamos de fazer:**
- Criamos uma conexão entre o seu projeto local e o seu repositório no GitHub
- "Origin" é apenas um apelido para o seu repositório no GitHub – é como adicionar um contato no seu telefone
- Agora o seu Git local sabe para onde enviar seu código quando você estiver pronto para compartilhá-lo
💡 **Forma mais fácil**: Se você tiver o GitHub CLI instalado, pode fazer isso com um único comando:
```bash
gh repo create my-repo --public --push --source=.
```
@ -298,19 +297,19 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessário e
git push -u origin main
```
**🚀 É isso! Você está enviando seu código para o GitHub!**
**O que está acontecendo:**
- Seus commits estão viajando do seu computador para o GitHub.
- A flag `-u` configura uma conexão permanente para que futuros pushes sejam mais fáceis.
- "main" é o nome da sua branch principal (como a pasta principal).
- Depois disso, você pode simplesmente digitar `git push` para futuros uploads!
**🚀 É isso! Você está enviando seu código para o GitHub!**
**O que está acontecendo:**
- Seus commits estão viajando do seu computador para o GitHub
- A flag `-u` configura uma conexão permanente para que futuros envios sejam mais fáceis
- "main" é o nome do seu branch principal (como a pasta principal)
- Depois disso, você pode simplesmente digitar `git push` para futuros uploads!
💡 **Nota rápida**: Se sua branch tiver outro nome (como "master"), use esse nome. Você pode verificar com `git branch --show-current`.
💡 **Nota rápida**: Se o seu branch tiver outro nome (como "master"), use esse nome. Você pode verificar com `git branch --show-current`.
9. **Seu novo ritmo diário de codificação** (é aqui que fica viciante!):
De agora em diante, sempre que fizer alterações no seu projeto, você terá essa dança simples de três passos:
A partir de agora, sempre que você fizer alterações no seu projeto, você seguirá esta dança simples de três passos:
```bash
git add .
@ -318,18 +317,18 @@ De agora em diante, sempre que fizer alterações no seu projeto, você terá es
git push
```
**Isso se torna o coração da sua codificação:**
- Faça algumas alterações incríveis no seu código ✨
- Salve-as com `git commit` e uma mensagem descritiva (o você do futuro vai te agradecer!)
- Compartilhe com o mundo usando `git push` 🚀
- Repita – sério, isso se torna tão natural quanto respirar!
Eu amo esse fluxo de trabalho porque é como ter vários pontos de salvamento em um videogame. Fez uma alteração que você ama? Faça um commit! Quer tentar algo arriscado? Sem problemas – você sempre pode voltar ao seu último commit se algo der errado!
Eu amo esse fluxo de trabalho porque é como ter vários pontos de salvamento em um videogame. Fez uma mudança que você adorou? Faça um commit! Quer tentar algo arriscado? Sem problemas – você sempre pode voltar ao último commit se algo der errado!
> 💡 **Dica**: Você também pode adotar um arquivo `.gitignore` para evitar que arquivos que você não quer rastrear apareçam no GitHub - como aquele arquivo de notas que você guarda na mesma pasta, mas não tem lugar em um repositório público. Você pode encontrar modelos para arquivos `.gitignore` em [.gitignore templates](https://github.com/github/gitignore) ou criar um usando [gitignore.io](https://www.toptal.com/developers/gitignore).
> 💡 **Dica**: Você também pode adotar um arquivo `.gitignore` para evitar que arquivos que você não quer rastrear apareçam no GitHub – como aquele arquivo de anotações que você guarda na mesma pasta, mas que não tem lugar em um repositório público. Você pode encontrar modelos de arquivos `.gitignore` em [.gitignore templates](https://github.com/github/gitignore) ou criar um usando [gitignore.io](https://www.toptal.com/developers/gitignore).
### 🧠 **Primeiro Check-in no Repositório: Como Foi Essa Experiência?**
### 🧠 **Primeiro Check-in no Repositório: Como Foi?**
**Tire um momento para celebrar e refletir:**
- Como foi ver seu código aparecer no GitHub pela primeira vez?
@ -338,87 +337,86 @@ Eu amo esse fluxo de trabalho porque é como ter vários pontos de salvamento em
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Criar projeto
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! 🎉
GitHub --> [*]: Sucesso! 🎉
note right of Staged
Files ready to save
Arquivos prontos para salvar
end note
note right of Committed
Snapshot created
Snapshot criado
end note
```
> **Lembre-se**: Mesmo desenvolvedores experientes às vezes esquecem os comandos exatos. Tornar esse fluxo de trabalho algo automático leva prática – você está indo muito bem!
#### Fluxos de trabalho modernos com Git
Considere adotar estas práticas modernas:
- **Commits Convencionais**: Use um formato padronizado de mensagens de commit como `feat:`, `fix:`, `docs:`, etc. Saiba mais em [conventionalcommits.org](https://www.conventionalcommits.org/).
- **Commits atômicos**: Faça cada commit representar uma única mudança lógica.
- **Commits frequentes**: Faça commits frequentemente com mensagens descritivas, em vez de grandes commits infrequentes.
- **Commits Convencionais**: Use um formato padronizado para mensagens de commit como `feat:`, `fix:`, `docs:`, etc. Saiba mais em [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Commits atômicos**: Faça com que cada commit represente uma única mudança lógica
- **Commits frequentes**: Faça commits frequentemente com mensagens descritivas em vez de grandes commits esporádicos
#### Mensagens de commit
Uma ótima linha de assunto de commit completa a seguinte frase:
Se aplicado, este commit irá <sualinhadeassuntoaqui>.
Uma ótima linha de assunto para um commit no Git completa a seguinte frase:
Se aplicado, este commit irá <sualinhadeassuntoaqui>
Para o assunto, use o imperativo no presente: "alterar" e não "alterado" ou "altera". Assim como no assunto, no corpo (opcional) também use o imperativo no presente. O corpo deve incluir a motivação para a mudança e contrastar isso com o comportamento anterior. Você está explicando o `porquê`, não o `como`.
Para o assunto, use o imperativo no presente: "alterar" e não "alterado" nem "altera".
Assim como no assunto, no corpo (opcional) também use o imperativo no presente. O corpo deve incluir a motivação para a mudança e contrastar isso com o comportamento anterior. Você está explicando o `porquê`, não o `como`.
✅ Reserve alguns minutos para explorar o GitHub. Você consegue encontrar uma mensagem de commit realmente boa? E uma bem simples? Quais informações você acha que são as mais importantes e úteis para transmitir em uma mensagem de commit?
✅ Tire alguns minutos para explorar o GitHub. Você consegue encontrar uma mensagem de commit realmente boa? E uma bem minimalista? Que informações você acha mais importantes e úteis de serem transmitidas em uma mensagem de commit?
## Trabalhando com Outros (A Parte Divertida!)
Segure o chapéu porque AGORA é onde o GitHub se torna absolutamente mágico! 🪄 Você já dominou a gestão do seu próprio código, mas agora vamos mergulhar na minha parte favorita – colaborar com pessoas incríveis de todo o mundo.
Segure o chapéu porque AQUI é onde o GitHub se torna absolutamente mágico! 🪄 Você já dominou a gestão do seu próprio código, mas agora vamos mergulhar na minha parte favorita – colaborar com pessoas incríveis de todo o mundo.
Imagine isso: você acorda amanhã e descobre que alguém em Tóquio melhorou seu código enquanto você dormia. Então, alguém em Berlim corrige um bug que estava te deixando preso. À tarde, um desenvolvedor em São Paulo adiciona uma funcionalidade que você nem tinha pensado. Isso não é ficção científica – é apenas uma terça-feira no universo do GitHub!
Imagine isso: você acorda amanhã e descobre que alguém em Tóquio melhorou seu código enquanto você dormia. Depois, alguém em Berlim corrige um bug que você estava tentando resolver. À tarde, um desenvolvedor em São Paulo adiciona um recurso que você nem tinha pensado. Isso não é ficção científica – é só mais uma terça-feira no universo do GitHub!
O que realmente me empolga é que as habilidades de colaboração que você está prestes a aprender? São os MESMOS fluxos de trabalho que equipes no Google, Microsoft e suas startups favoritas usam todos os dias. Você não está apenas aprendendo uma ferramenta legal – está aprendendo a linguagem secreta que faz o mundo inteiro do software funcionar junto.
O que me deixa realmente empolgado é que as habilidades de colaboração que você está prestes a aprender? São os MESMOS fluxos de trabalho que equipes no Google, Microsoft e suas startups favoritas usam todos os dias. Você não está apenas aprendendo uma ferramenta legal – você está aprendendo a linguagem secreta que faz o mundo inteiro do software funcionar junto.
Sério, uma vez que você experimenta a emoção de ter alguém aceitando seu primeiro pull request, você entende por que os desenvolvedores são tão apaixonados por código aberto. É como fazer parte do maior e mais criativo projeto de equipe do mundo!
Sério, uma vez que você experimenta a emoção de ter alguém aceitando seu primeiro pull request, você entende por que os desenvolvedores são tão apaixonados por código aberto. É como fazer parte do maior e mais criativo projeto em equipe do mundo!
> Assista ao vídeo
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
O principal motivo para colocar coisas no GitHub foi tornar possível colaborar com outros desenvolvedores.
O principal motivo para colocar coisas no GitHub era possibilitar a colaboração com outros desenvolvedores.
```mermaid
flowchart LR
A[🔍 Find Project] --> B[🍴 Fork Repository]
B --> C[📥 Clone to Local]
C --> D[🌿 Create Branch]
D --> E[✏️ Make Changes]
E --> F[💾 Commit Changes]
F --> G[📤 Push Branch]
G --> H[🔄 Create Pull Request]
H --> I{Maintainer Review}
I -->|✅ Approved| J[🎉 Merge!]
I -->|❓ Changes Requested| K[📝 Make Updates]
A[🔍 Encontrar Projeto] --> B[🍴 Fazer Fork do Repositório]
B --> C[📥 Clonar para Local]
C --> D[🌿 Criar Ramificação]
D --> E[✏️ Fazer Alterações]
E --> F[💾 Commitar Alterações]
F --> G[📤 Enviar Ramificação]
G --> H[🔄 Criar Pull Request]
H --> I{Revisão do Mantenedor}
I -->|✅ Aprovado| J[🎉 Fazer Merge!]
I -->|❓ Alterações Solicitadas| K[📝 Fazer Atualizações]
K --> F
J --> L[🧹 Clean Up Branches]
J --> L[🧹 Limpar Ramificações]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
No seu repositório, navegue até `Insights > Community` para ver como seu projeto se compara aos padrões recomendados da comunidade.
No seu repositório, navegue até `Insights > Community` para ver como seu projeto se compara aos padrões recomendados pela comunidade.
Quer fazer seu repositório parecer profissional e acolhedor? Vá até seu repositório e clique em `Insights > Community`. Esse recurso incrível mostra como seu projeto se compara ao que a comunidade do GitHub considera "boas práticas de repositório".
Quer fazer seu repositório parecer profissional e acolhedor? Vá até o seu repositório e clique em `Insights > Community`. Esse recurso incrível mostra como seu projeto se compara ao que a comunidade do GitHub considera "boas práticas de repositório".
> 🎯 **Fazendo Seu Projeto Brilhar**: Um repositório bem organizado com boa documentação é como ter uma vitrine limpa e acolhedora. Isso mostra que você se importa com seu trabalho e faz com que outros queiram contribuir!
> 🎯 **Fazendo Seu Projeto Brilhar**: Um repositório bem organizado com boa documentação é como ter uma vitrine limpa e acolhedora. Ele mostra que você se importa com seu trabalho e faz com que outros queiram contribuir!
**O que torna um repositório incrível:**
| O que Adicionar | Por que é Importante | O que Faz por Você |
| **Descrição** | A primeira impressão importa! | As pessoas sabem instantaneamente o que seu projeto faz |
| **Descrição** | A primeira impressão conta! | As pessoas sabem instantaneamente o que seu projeto faz |
| **README** | A página inicial do seu projeto | Como um guia amigável para novos visitantes |
| **Diretrizes de Contribuição** | Mostra que você aceita ajuda | As pessoas sabem exatamente como podem ajudar você |
| **Código de Conduta** | Cria um espaço amigável | Todos se sentem bem-vindos para participar |
@ -430,91 +428,90 @@ Quer fazer seu repositório parecer profissional e acolhedor? Vá até seu repos
**Recursos Modernos do GitHub para Explorar:**
🤖 **Automação & CI/CD:**
- **GitHub Actions** para testes e deploys automáticos.
- **Dependabot** para atualizações automáticas de dependências.
- **GitHub Actions** para testes e implantações automatizadas
- **Dependabot** para atualizações automáticas de dependências
💬 **Comunidade & Gerenciamento de Projetos:**
- **GitHub Discussions** para conversas comunitárias além de issues.
- **GitHub Projects** para gerenciamento de projetos no estilo kanban.
- **Regras de proteção de branch** para garantir padrões de qualidade de código.
- **GitHub Discussions** para conversas comunitárias além de issues
- **GitHub Projects** para gerenciamento de projetos no estilo kanban
- **Regras de proteção de branch** para garantir padrões de qualidade de código
Todos esses recursos ajudam na integração de novos membros da equipe. E são geralmente as coisas que novos contribuidores olham antes mesmo de ver seu código, para descobrir se seu projeto é o lugar certo para eles investirem seu tempo.
Todos esses recursos ajudarão na integração de novos membros da equipe. E essas são geralmente as coisas que novos contribuidores olham antes mesmo de olhar para o seu código, para descobrir se o seu projeto é o lugar certo para eles investirem seu tempo.
✅ Arquivos README, embora levem tempo para serem preparados, são frequentemente negligenciados por mantenedores ocupados. Você consegue encontrar um exemplo de um README particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que você pode querer experimentar.
✅ Arquivos README, embora levem tempo para serem preparados, são frequentemente negligenciados por mantenedores ocupados. Você consegue encontrar um exemplo de um particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que você pode querer experimentar.
### Tarefa: Mesclar algum código
Documentos de contribuição ajudam as pessoas a contribuir para o projeto. Eles explicam quais tipos de contribuições você está procurando e como o processo funciona. Os contribuidores precisarão passar por uma série de etapas para poder contribuir para seu repositório no GitHub:
Documentos de contribuição ajudam as pessoas a contribuir com o projeto. Eles explicam quais tipos de contribuições você está procurando e como o processo funciona. Os contribuidores precisarão passar por uma série de etapas para poder contribuir com seu repositório no GitHub:
1. **Fazer um fork do seu repositório**. Você provavelmente vai querer que as pessoas _façam um fork_ do seu projeto. Fazer um fork significa criar uma réplica do seu repositório no perfil delas no GitHub.
1. **Clonar**. A partir daí, elas irão clonar o projeto para suas máquinas locais.
1. **Criar uma branch**. Você vai querer pedir que elas criem uma_branch_ para o trabalho delas.
1. **Focar a mudança em uma área**. Peça aos contribuidores para concentrarem suas contribuições em uma coisa de cada vez – assim, as chances de você conseguir _mesclar_ o trabalho deles são maiores. Imagine que eles escrevem uma correção de bug, adicionam uma nova funcionalidade e atualizam vários testes – e se você quiser, ou puder, implementar apenas 2 de 3 ou 1 de 3 mudanças?
1. **Fazer um fork do seu repositório**. Você provavelmente vai querer que as pessoas _façam um fork_ do seu projeto. Fazer um fork significa criar uma réplica do seu repositório no perfil do GitHub delas.
1. **Clonar**. A partir daí, elas irão clonar o projeto para a máquina local.
1. **Criar um branch**. Você vai querer pedir que elas criem um _branch_ para o trabalho delas.
1. **Focar a mudança em uma área**. Peça aos contribuidores que concentrem suas contribuições em uma coisa de cada vez – assim, as chances de você _mesclar_ o trabalho deles são maiores. Imagine que eles escrevam uma correção de bug, adicionem um novo recurso e atualizem vários testes – e se você quiser, ou puder, implementar apenas 2 de 3, ou 1 de 3 mudanças?
✅ Imagine uma situação onde branches são particularmente críticas para escrever e enviar um bom código. Quais casos de uso você consegue pensar?
✅ Imagine uma situação onde branches são particularmente críticos para escrever e entregar um bom código. Quais casos de uso você consegue pensar?
> Nota: seja a mudança que você quer ver no mundo e crie branches para seu próprio trabalho também. Qualquer commit que você fizer será feito na branch em que você está atualmente "checado". Use `git status` para ver qual branch é essa.
> Nota, seja a mudança que você quer ver no mundo, e crie branches para o seu próprio trabalho também. Quaisquer commits que você fizer serão feitos no branch em que você está atualmente "checado". Use `git status` para ver em qual branch você está.
Vamos passar por um fluxo de trabalho de contribuidor. Suponha que o contribuidor já tenha feito _fork_ e _clonado_ o repositório, então ele tem um repositório Git pronto para ser trabalhado em sua máquina local:
Vamos passar por um fluxo de trabalho de contribuidor. Suponha que o contribuidor já tenha _feito um fork_ e _clonado_ o repositório, então ele tem um repositório Git pronto para ser trabalhado, na máquina local:
1. **Criar uma branch**. Use o comando `git branch` para criar uma branch que conterá as mudanças que ele pretende contribuir:
1. **Criar um branch**. Use o comando `git branch` para criar um branch que conterá as mudanças que ele pretende contribuir:
```bash
git branch [branch-name]
```
> 💡 **Abordagem Moderna**: Você também pode criar e alternar para a nova branch em um único comando:
> 💡 **Abordagem Moderna**: Você também pode criar e alternar para o novo branch em um único comando:
```bash
git switch -c [branch-name]
```
1. **Alternar para a branch de trabalho**. Alterne para a branch especificada e atualize o diretório de trabalho com `git switch`:
1. **Alternar para o branch de trabalho**. Altere para o branch especificado e atualize o diretório de trabalho com `git switch`:
```bash
git switch [branch-name]
```
> 💡 **Nota Moderna**: `git switch` é a substituição moderna para `git checkout` ao mudar de branch. É mais claro e seguro para iniciantes.
> 💡 **Nota Moderna**: `git switch` é a substituição moderna para `git checkout` ao mudar de branch. É mais claro e seguro para iniciantes.
1. **Fazer o trabalho**. Neste ponto, você quer adicionar suas mudanças. Não se esqueça de informar ao Git sobre isso com os seguintes comandos:
1. **Fazer o trabalho**. Neste ponto, você quer adicionar suas mudanças. Não se esqueça de informar ao Git com os seguintes comandos:
```bash
git add .
git commit -m "my changes"
```
> ⚠️ **Qualidade da Mensagem de Commit**: Certifique-se de dar um bom nome ao seu commit, tanto para você quanto para o mantenedor do repositório que você está ajudando. Seja específico sobre o que você alterou!
> ⚠️ **Qualidade da Mensagem de Commit**: Certifique-se de dar um bom nome ao seu commit, tanto para você quanto para o mantenedor do repositório que você está ajudando. Seja específico sobre o que você mudou!
1. **Combinar seu trabalho com a branch `main`**. Em algum momento, você termina o trabalho e quer combinar seu trabalho com o da branch `main`. A branch `main` pode ter mudado enquanto isso, então certifique-se de primeiro atualizá-la para a versão mais recente com os seguintes comandos:
1. **Combinar seu trabalho com o branch `main`**. Em algum momento, você termina o trabalho e quer combinar seu trabalho com o do branch `main`. O branch `main` pode ter mudado nesse meio tempo, então certifique-se de atualizá-lo para a versão mais recente com os seguintes comandos:
```bash
git switch main
git pull
```
Neste ponto, você quer garantir que quaisquer _conflitos_, situações onde o Git não consegue facilmente _combinar_ as mudanças, aconteçam na sua branch de trabalho. Portanto, execute os seguintes comandos:
Neste ponto, você quer garantir que quaisquer _conflitos_, situações onde o Git não consegue facilmente _combinar_ as mudanças, ocorram no seu branch de trabalho. Portanto, execute os seguintes comandos:
```bash
git switch [branch_name]
git merge main
```
O comando `git merge main` trará todas as mudanças da `main` para sua branch. Esperamos que você possa simplesmente continuar. Se não, o VS Code mostrará onde o Git está _confuso_ e você apenas altera os arquivos afetados para indicar qual conteúdo é o mais preciso.
O comando `git merge main` trará todas as mudanças do `main` para o seu branch. Com sorte, você pode simplesmente continuar. Se não, o VS Code mostrará onde o Git está _confuso_ e você apenas altera os arquivos afetados para dizer qual conteúdo é o mais preciso.
💡 **Alternativa Moderna**: Considere usar `git rebase` para um histórico mais limpo:
💡 **Alternativa moderna**: Considere usar `git rebase` para um histórico mais limpo:
```bash
git rebase main
```
Isso reproduz seus commits no topo do branch `main` mais recente, criando um histórico linear.
Isso reproduz seus commits no topo da última branch main, criando um histórico linear.
1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Enviar sua branch para seu repositório e então abrir um PR, Pull Request.
1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Fazer o push do seu branch para o seu repositório e depois abrir um PR, Pull Request.
```bash
git push --set-upstream origin [branch-name]
```
O comando acima cria a branch no seu repositório forkado.
O comando acima cria o branch no seu repositório forkado.
### 🤝 **Teste de Habilidades de Colaboração: Pronto para Trabalhar com Outros?**
@ -525,47 +522,46 @@ O comando acima cria a branch no seu repositório forkado.
```mermaid
mindmap
root((Git Collaboration))
root((Colaboração com Git))
Branching
Feature branches
Bug fix branches
Experimental work
Ramificações de funcionalidades
Ramificações de correção de bugs
Trabalho experimental
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
Revisão de código
Discussão
Testes
Melhores Práticas
Mensagens de commit claras
Mudanças pequenas e focadas
Boa documentação
```
> **Impulsionador de confiança**: Todo desenvolvedor que você admira já ficou nervoso com seu primeiro pull request. A comunidade do GitHub é incrivelmente acolhedora para iniciantes!
> **Impulso de confiança**: Todo desenvolvedor que você admira já ficou nervoso com seu primeiro pull request. A comunidade do GitHub é incrivelmente acolhedora para iniciantes!
1. **Abra um PR**. Em seguida, você quer abrir um PR. Você faz isso navegando até o repositório forkado no GitHub. Você verá uma indicação no GitHub perguntando se deseja criar um novo PR, clique nisso e você será levado a uma interface onde pode alterar o título da mensagem de commit, dar uma descrição mais adequada. Agora o mantenedor do repositório que você forkou verá este PR e _dedos cruzados_ ele apreciará e _mesclará_ seu PR. Agora você é um contribuidor, yay :)
1. **Abra um PR**. Em seguida, você quer abrir um PR. Você faz isso navegando até o repositório forkado no GitHub. Você verá uma indicação no GitHub perguntando se deseja criar um novo PR, clique nisso e será levado a uma interface onde pode alterar o título da mensagem de commit, dar uma descrição mais adequada. Agora o mantenedor do repositório que você forkou verá este PR e _dedos cruzados_ ele apreciará e _mesclará_ seu PR. Agora você é um contribuidor, yay :)
💡 **Dica Moderna**: Você também pode criar PRs usando o GitHub CLI:
💡 **Dica Moderna**: Você também pode criar PRs usando o GitHub CLI:
- Vincule a issues relacionadas usando palavras-chave como "Fixes #123".
- Adicione capturas de tela para mudanças na interface.
- Solicite revisores específicos.
- Use PRs de rascunho para trabalhos em andamento.
- Certifique-se de que todos os testes de CI sejam aprovados antes de solicitar revisão.
🔧 **Melhores práticas para PRs**:
- Vincule a issues relacionadas usando palavras-chave como "Fixes #123"
- Adicione capturas de tela para mudanças na interface
- Solicite revisores específicos
- Use PRs de rascunho para trabalhos em andamento
- Certifique-se de que todos os testes de CI passem antes de solicitar revisão
1. **Limpeza**. É considerado uma boa prática _limpar_ após você ter mesclado com sucesso um PR. Você deve limpar tanto sua branch local quanto a branch que você enviou para o GitHub. Primeiro, vamos deletá-la localmente com o seguinte comando:
```bash
git branch -d [branch-name]
```
Certifique-se de ir à página do repositório bifurcado no GitHub e remover a branch remota que você acabou de enviar.
Certifique-se de ir à página do GitHub para o repositório bifurcado e remover a branch remota que você acabou de enviar.
`Pull request` parece um termo estranho porque, na verdade, você quer enviar suas alterações para o projeto. Mas o mantenedor (dono do projeto) ou a equipe principal precisa considerar suas alterações antes de mesclá-las com a branch "main" do projeto, então você está realmente solicitando uma decisão de mudança ao mantenedor.
`Pull request` parece um termo estranho porque, na verdade, você quer enviar suas alterações para o projeto. Mas o mantenedor (dono do projeto) ou a equipe principal precisa considerar suas alterações antes de mesclá-las com a branch "main" do projeto, então você está realmente solicitando uma decisão de mudança de um mantenedor.
Um pull request é o lugar para comparar e discutir as diferenças introduzidas em uma branch com revisões, comentários, testes integrados e mais. Um bom pull request segue basicamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, por exemplo, quando seu trabalho resolve um problema. Isso é feito usando um `#` seguido pelo número do problema. Por exemplo, `#97`.
Um pull request é o lugar para comparar e discutir as diferenças introduzidas em uma branch com revisões, comentários, testes integrados e mais. Um bom pull request segue aproximadamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, quando seu trabalho, por exemplo, resolve um problema. Isso é feito usando um `#` seguido pelo número do problema. Por exemplo, `#97`.
🤞Dedos cruzados para que todos os testes passem e o(s) dono(s) do projeto mesclem suas alterações no projeto🤞
@ -575,34 +571,33 @@ Atualize sua branch local atual com todos os novos commits da branch remota corr
## Contribuindo para Open Source (Sua Chance de Fazer a Diferença!)
Está pronto para algo que vai explodir sua mente? 🤯 Vamos falar sobre contribuir para projetos de código aberto – e estou arrepiado só de pensar em compartilhar isso com você!
Está pronto para algo que vai absolutamente explodir sua mente? 🤯 Vamos falar sobre contribuir para projetos de código aberto – e estou arrepiado só de pensar em compartilhar isso com você!
Essa é sua chance de fazer parte de algo verdadeiramente extraordinário. Imagine melhorar ferramentas que milhões de desenvolvedores usam todos os dias ou corrigir um bug em um aplicativo que seus amigos adoram. Isso não é apenas um sonho – é exatamente o que significa contribuir para o código aberto!
Essa é sua chance de fazer parte de algo verdadeiramente extraordinário. Imagine melhorar as ferramentas que milhões de desenvolvedores usam todos os dias ou corrigir um bug em um aplicativo que seus amigos adoram. Isso não é apenas um sonho – é exatamente o que a contribuição para código aberto significa!
Aqui está o que me dá arrepios toda vez que penso nisso: cada ferramenta que você tem aprendido – seu editor de código, os frameworks que exploraremos, até o navegador que você está usando agora– começou com alguém exatamente como você fazendo sua primeira contribuição. Aquele desenvolvedor brilhante que criou sua extensão favorita do VS Code? Ele também foi um iniciante clicando em "create pull request" com as mãos trêmulas, assim como você está prestes a fazer.
Aqui está o que me dá arrepios toda vez que penso nisso: cada ferramenta que você tem aprendido – seu editor de código, os frameworks que exploraremos, até mesmo o navegador que você está usando – começou com alguém exatamente como você fazendo sua primeira contribuição. Aquele desenvolvedor brilhante que criou sua extensão favorita do VS Code? Ele também foi um iniciante clicando em "create pull request" com as mãos trêmulas, assim como você está prestes a fazer.
E aqui está a parte mais bonita: a comunidade de código aberto é como o maior abraço coletivo da internet. A maioria dos projetos procura ativamente por iniciantes e tem problemas marcados como "good first issue" especificamente para pessoas como você! Os mantenedores genuinamente ficam animados ao ver novos contribuidores porque se lembram de seus próprios primeiros passos.
E aqui está a parte mais bonita: a comunidade de código aberto é como o maior abraço coletivo da internet. A maioria dos projetos procura ativamente por novos colaboradores e tem problemas marcados como "good first issue" especificamente para pessoas como você! Os mantenedores genuinamente ficam animados quando veem novos colaboradores porque se lembram de seus próprios primeiros passos.
```mermaid
flowchart TD
A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
B --> C[📖 Read Contributing Guidelines]
C --> D[🍴 Fork Repository]
D --> E[💻 Set Up Local Environment]
E --> F[🌿 Create Feature Branch]
F --> G[✨ Make Your Contribution]
G --> H[🧪 Test Your Changes]
H --> I[📝 Write Clear Commit]
I --> J[📤 Push & Create PR]
J --> K[💬 Engage with Feedback]
K --> L[🎉 Merged! You're a Contributor!]
L --> M[🌟 Find Next Issue]
A[🔍 Explorar GitHub] --> B[🏷️ Encontrar "boa primeira issue"]
B --> C[📖 Ler Diretrizes de Contribuição]
C --> D[🍴 Fazer Fork do Repositório]
D --> E[💻 Configurar Ambiente Local]
E --> F[🌿 Criar Branch de Funcionalidade]
F --> G[✨ Fazer Sua Contribuição]
G --> H[🧪 Testar Suas Alterações]
H --> I[📝 Escrever Commit Claro]
I --> J[📤 Fazer Push & Criar PR]
J --> K[💬 Interagir com Feedback]
K --> L[🎉 Mergeado! Você é um Contribuidor!]
L --> M[🌟 Encontrar Próxima Issue]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Você não está apenas aprendendo a programar aqui – está se preparando para se juntar a uma família global de criadores que acordam todos os dias pensando "Como podemos tornar o mundo digital um pouco melhor?" Bem-vindo ao clube! 🌟
Primeiro, vamos encontrar um repositório (ou **repo**) no GitHub que seja do seu interesse e ao qual você gostaria de contribuir com uma alteração. Você vai querer copiar seu conteúdo para sua máquina.
@ -615,13 +610,13 @@ Existem várias maneiras de copiar código. Uma delas é "clonar" o conteúdo do
Abra seu terminal e clone o repositório assim:
```bash
# Using HTTPS
# Usando HTTPS
git clone https://github.com/ProjectURL
# Using SSH (requires SSH key setup)
# Usando SSH (requer configuração de chave SSH)
git clone git@github.com:username/repository.git
# Using GitHub CLI
# Usando GitHub CLI
gh repo clone username/repository
```
@ -649,7 +644,7 @@ Os projetos também podem ter discussões em fóruns, listas de e-mails ou canai
- **GitHub Sponsors** - Apoie financeiramente os mantenedores
- **Aba de segurança** - Relatórios de vulnerabilidade e avisos de segurança
- **Aba de ações** - Veja fluxos de trabalho automatizados e pipelines CI/CD
- **Aba de insights** - Análises sobre contribuidores, commits e saúde do projeto
- **Aba de insights** - Análises sobre colaboradores, commits e saúde do projeto
- **Aba de projetos** - Ferramentas de gerenciamento de projetos integradas do GitHub
✅ Dê uma olhada no seu novo repositório do GitHub e experimente algumas coisas, como editar configurações, adicionar informações ao seu repositório, criar um projeto (como um quadro Kanban) e configurar GitHub Actions para automação. Há muito o que explorar!
@ -660,7 +655,7 @@ Os projetos também podem ter discussões em fóruns, listas de e-mails ou canai
Certo, é hora de colocar seus novos superpoderes do GitHub à prova! 🚀 Aqui está um desafio que vai fazer tudo se encaixar de forma super satisfatória:
Chame um amigo (ou aquele membro da família que sempre pergunta o que você está fazendo com todo esse "negócio de computador") e embarque juntos em uma aventura de codificação colaborativa! É aqui que a mágica acontece – crie um projeto, deixe eles forcarem, criem algumas branches e mesclem alterações como os profissionais que vocês estão se tornando.
Chame um amigo (ou aquele membro da família que sempre pergunta o que você está fazendo com "essas coisas de computador") e embarque juntos em uma aventura de codificação colaborativa! É aqui que a mágica acontece – crie um projeto, deixe eles forcarem, criem algumas branches e mesclem alterações como os profissionais que vocês estão se tornando.
Não vou mentir – vocês provavelmente vão rir em algum momento (especialmente quando ambos tentarem alterar a mesma linha), talvez coçar a cabeça em confusão, mas definitivamente terão aqueles momentos incríveis de "aha!" que fazem todo o aprendizado valer a pena. Além disso, há algo especial em compartilhar aquela primeira mesclagem bem-sucedida com outra pessoa – é como uma pequena celebração de quão longe vocês chegaram!
@ -671,14 +666,14 @@ Ainda não tem um parceiro de codificação? Sem problemas! A comunidade do GitH
## Revisão & Continue Aprendendo
Ufa! 🎉 Olha só –você acabou de dominar os fundamentos do GitHub como um verdadeiro campeão! Se sua cabeça está um pouco cheia agora, isso é completamente normal e, honestamente, um bom sinal. Você acabou de aprender ferramentas que levaram semanas para eu me sentir confortável quando comecei.
Ufa! 🎉 Olha só você– acabou de dominar os fundamentos do GitHub como um verdadeiro campeão! Se sua cabeça está um pouco cheia agora, isso é completamente normal e, honestamente, um bom sinal. Você acabou de aprender ferramentas que levaram semanas para eu me sentir confortável quando comecei.
Git e GitHub são incrivelmente poderosos (tipo, muito poderosos), e todo desenvolvedor que conheço – incluindo aqueles que parecem magos agora – teve que praticar e tropeçar um pouco antes de tudo fazer sentido. O fato de você ter concluído esta lição significa que já está no caminho para dominar algumas das ferramentas mais importantes no kit de ferramentas de um desenvolvedor.
Aqui estão alguns recursos absolutamente fantásticos para ajudá-lo a praticar e se tornar ainda mais incrível:
- [Guia para contribuir com software de código aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Seu roteiro para fazer a diferença
- [Cheatsheet do Git](https://training.github.com/downloads/github-git-cheat-sheet/) – Tenha isso à mão para referência rápida!
- [Guia de contribuição para software de código aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Seu roteiro para fazer a diferença
- [Cheatsheet de Git](https://training.github.com/downloads/github-git-cheat-sheet/) – Tenha isso à mão para referência rápida!
E lembre-se: prática leva ao progresso, não à perfeição! Quanto mais você usar Git e GitHub, mais natural isso se tornará. O GitHub criou alguns cursos interativos incríveis que permitem que você pratique em um ambiente seguro:
@ -691,22 +686,22 @@ E lembre-se: prática leva ao progresso, não à perfeição! Quanto mais você
- [Documentação do GitHub CLI](https://cli.github.com/manual/) – Para quando você quiser se sentir como um mago da linha de comando
- [Documentação do GitHub Codespaces](https://docs.github.com/en/codespaces) – Codifique na nuvem!
- [Documentação do GitHub Actions](https://docs.github.com/en/actions) – Automatize tudo
- [Melhores práticas do Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Eleve seu jogo de fluxo de trabalho
- [Melhores práticas de Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Eleve seu jogo de fluxo de trabalho
## Desafio do Agente GitHub Copilot 🚀
Use o modo Agente para completar o seguinte desafio:
**Descrição:** Crie um projeto colaborativo de desenvolvimento web que demonstre o fluxo de trabalho completo do GitHub que você aprendeu nesta lição. Este desafio ajudará você a praticar a criação de repositórios, recursos de colaboração e fluxos de trabalho modernos do Git em um cenário real.
**Descrição:** Crie um projeto colaborativo de desenvolvimento web que demonstre o fluxo de trabalho completo do GitHub que você aprendeu nesta lição. Este desafio ajudará você a praticar criação de repositórios, recursos de colaboração e fluxos de trabalho modernos do Git em um cenário real.
**Prompt:** Crie um novo repositório público no GitHub para um projeto simples de "Recursos de Desenvolvimento Web". O repositório deve incluir um arquivo README.md bem estruturado listando ferramentas e recursos úteis para desenvolvimento web, organizados por categorias (HTML, CSS, JavaScript, etc.). Configure o repositório com padrões de comunidade adequados, incluindo uma licença, diretrizes de contribuição e um código de conduta. Crie pelo menos duas branches de recursos: uma para adicionar recursos de CSS e outra para recursos de JavaScript. Faça commits em cada branch com mensagens de commit descritivas, depois crie pull requests para mesclar as alterações de volta para a main. Ative recursos do GitHub como Issues, Discussions e configure um fluxo de trabalho básico do GitHub Actions para verificações automatizadas.
**Prompt:** Crie um novo repositório público no GitHub para um projeto simples de "Recursos de Desenvolvimento Web". O repositório deve incluir um arquivo README.md bem estruturado listando ferramentas e recursos úteis de desenvolvimento web, organizados por categorias (HTML, CSS, JavaScript, etc.). Configure o repositório com padrões adequados da comunidade, incluindo uma licença, diretrizes de contribuição e um código de conduta. Crie pelo menos duas branches de recursos: uma para adicionar recursos de CSS e outra para recursos de JavaScript. Faça commits em cada branch com mensagens de commit descritivas, depois crie pull requests para mesclar as alterações de volta para a main. Ative recursos do GitHub como Issues, Discussions e configure um fluxo de trabalho básico do GitHub Actions para verificações automatizadas.
## Tarefa
Sua missão, caso decida aceitá-la: Complete o curso [Introdução ao GitHub](https://github.com/skills/introduction-to-github) no GitHub Skills. Este curso interativo permitirá que você pratique tudo o que aprendeu em um ambiente seguro e guiado. Além disso, você ganhará um badge legal ao terminar! 🏅
**Sentindo-se pronto para mais desafios?**
- Configure a autenticação SSH para sua conta do GitHub (nada de senhas!)
- Configure autenticação SSH para sua conta do GitHub (nada de senhas!)
- Experimente usar o GitHub CLI para suas operações diárias com Git
- Crie um repositório com um fluxo de trabalho do GitHub Actions
- Explore o GitHub Codespaces abrindo este mesmo repositório em um editor baseado na nuvem
@ -715,25 +710,25 @@ Sua missão, caso decida aceitá-la: Complete o curso [Introdução ao GitHub](h
## 🚀 Sua Linha do Tempo de Domínio do GitHub
### ⚡ **O que você pode fazer nos próximos 5 minutos**
### ⚡ **O Que Você Pode Fazer nos Próximos 5 Minutos**
- [ ] Dê estrela neste repositório e em outros 3 projetos que te interessam
- [ ] Configure a autenticação de dois fatores na sua conta do GitHub
- [ ] Configure autenticação de dois fatores na sua conta do GitHub
- [ ] Crie um README simples para seu primeiro repositório
- [ ] Siga 5 desenvolvedores cujo trabalho te inspira
### 🎯 **O que você pode realizar nesta hora**
### 🎯 **O Que Você Pode Realizar Nesta Hora**
- [ ] Complete o quiz pós-aula e reflita sobre sua jornada no GitHub
- [ ] Configure chaves SSH para autenticação sem senha no GitHub
- [ ] Faça seu primeiro commit significativo com uma ótima mensagem de commit
- [ ] Explore a aba "Explore" do GitHub para descobrir projetos em alta
- [ ] Pratique forkar um repositório e fazer uma pequena alteração
### 📅 **Sua Aventura de GitHub de Uma Semana**
### 📅 **Sua Aventura de Uma Semana no GitHub**
- [ ] Complete os cursos do GitHub Skills (Introdução ao GitHub, Markdown)
- [ ] Faça seu primeiro pull request para um projeto de código aberto
- [ ] Configure um site GitHub Pages para mostrar seu trabalho
- [ ] Participe de Discussões no GitHub sobre projetos que te interessam
- [ ] Crie um repositório com padrões de comunidade adequados (README, Licença, etc.)
- [ ] Crie um repositório com padrões adequados da comunidade (README, Licença, etc.)
- [ ] Experimente o GitHub Codespaces para desenvolvimento baseado na nuvem
### 🌟 **Sua Transformação de Um Mês**
@ -742,38 +737,39 @@ Sua missão, caso decida aceitá-la: Complete o curso [Introdução ao GitHub](h
- [ ] Configure fluxos de trabalho automatizados com GitHub Actions
- [ ] Construa um portfólio mostrando suas contribuições no GitHub
- [ ] Participe do Hacktoberfest ou eventos comunitários similares
- [ ] Torne-se mantenedor de seu próprio projeto que outros contribuem
- [ ] Torne-se mantenedor de seu próprio projeto para o qual outros contribuam
### 🎓 **Check-in Final de Domínio do GitHub**
**Celebre o quão longe você chegou:**
- Qual é sua coisa favorita sobre usar o GitHub?
- Qual recurso de colaboração mais te empolga?
- Quão confiante você se sente sobre contribuir para código aberto agora?
- Qual recurso de colaboração te deixa mais animado?
- Quão confiante você se sente em contribuir para código aberto agora?
- Qual é o primeiro projeto para o qual você quer contribuir?
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Sua Jornada de Confiança no GitHub
section Hoje
Nervoso: 3: Você
Curioso: 4: Você
Animado: 5: Você
section Esta Semana
Praticando: 4: Você
Contribuindo: 5: Você
Conectando: 5: Você
section Próximo Mês
Colaborando: 5: Você
Liderando: 5: Você
Inspirando Outros: 5: Você
```
> 🌍 **Bem-vindo à comunidade global de desenvolvedores!** Agora você tem as ferramentas para colaborar com milhões de desenvolvedores ao redor do mundo. Sua primeira contribuição pode parecer pequena, mas lembre-se - todo grande projeto de código aberto começou com alguém fazendo seu primeiro commit. A questão não é se você fará impacto, mas qual projeto incrível se beneficiará da sua perspectiva única primeiro! 🚀
> 🌍 **Bem-vindo à comunidade global de desenvolvedores!** Agora você tem as ferramentas para colaborar com milhões de desenvolvedores ao redor do mundo. Sua primeira contribuição pode parecer pequena, mas lembre-se - todo grande projeto de código aberto começou com alguém fazendo seu primeiro commit. A questão não é se você fará um impacto, mas qual projeto incrível se beneficiará da sua perspectiva única primeiro! 🚀
Lembre-se: todo especialista já foi iniciante. Você consegue! 💪
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
# Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de programação hoje!
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de codificação hoje!
Participe da Comunidade Azure AI Foundry no Discord
[](https://discord.com/invite/ByRwuEEgH4)
Siga estas etapas para começar a usar esses recursos:
1. **Faça um Fork do Repositório**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
@ -36,9 +36,9 @@ Siga estas etapas para começar a usar esses recursos:
#### Suporte via GitHub Action (Automatizado e Sempre Atualizado)
**Se você deseja ter suporte para idiomas adicionais, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
@ -46,15 +46,15 @@ Siga estas etapas para começar a usar esses recursos:
#### 🧑🎓 _Você é estudante?_
Visite [**Página do Hub de Estudantes**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até mesmo maneiras de obter um voucher para certificado gratuito. Esta é a página que você deve salvar nos favoritos e verificar de tempos em tempos, pois o conteúdo é atualizado mensalmente.
Visite [**Página do Hub Estudantil**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até mesmo maneiras de obter um voucher de certificado gratuito. Esta é a página que você deve marcar como favorita e verificar de tempos em tempos, pois trocamos o conteúdo mensalmente.
### 📣 Anúncio - Novos desafios com o modo Agent do GitHub Copilot para completar!
### 📣 Anúncio - Novos desafios do modo Agente do GitHub Copilot para completar!
Novo desafio adicionado, procure por "Desafio do GitHub Copilot Agent 🚀" na maioria dos capítulos. Este é um novo desafio para você completar usando o GitHub Copilot e o modo Agent. Se você ainda não usou o modo Agent antes, ele é capaz de não apenas gerar texto, mas também criar e editar arquivos, executar comandos e muito mais.
Novo desafio adicionado, procure por "Desafio do Agente do GitHub Copilot 🚀" na maioria dos capítulos. Esse é um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você ainda não usou o modo Agente antes, ele é capaz de não apenas gerar texto, mas também criar e editar arquivos, executar comandos e muito mais.
### 📣 Anúncio - _Novo Projeto para criar usando IA Generativa_
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto de Assistente de IA adicionado, confira [projeto](./09-chat-project/README.md)
Novo projeto de Assistente de IA acabou de ser adicionado, confira [projeto](./09-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado
@ -64,9 +64,9 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
@ -83,7 +83,7 @@ Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pa
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e siga lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula.
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula.
Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde nossa equipe de moderadores estará disponível para responder suas perguntas.
@ -91,10 +91,10 @@ Para aprofundar sua educação, recomendamos explorar [Microsoft Learn](https://
### 📋 Configurando seu ambiente
Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente em seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crie seu repositório
Para salvar seu trabalho facilmente, é recomendado que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório na sua conta do GitHub com uma cópia do currículo.
Para salvar seu trabalho facilmente, é recomendado que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório em sua conta do GitHub com uma cópia do currículo.
Siga estas etapas:
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
@ -112,12 +112,11 @@ Para executar este currículo localmente no seu computador, você precisará de
Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone seu repositório para o seu computador. Você pode fazer isso clicando no botão **Code** e copiando o URL:
1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
[CodeSpace](./images/createcodespace.png)
Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pelo URL que você acabou de copiar:
Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pela URL que você acabou de copiar:
```bash
git clone <your-repository-url>
@ -125,71 +124,70 @@ Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que você acabou de clonar.
> Extensões recomendadas para o Visual Studio Code:
> Extensões recomendadas para Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML no Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido
## 📂 Cada aula inclui:
- sketchnote opcional
- vídeo complementar opcional
- questionário de aquecimento antes da aula
- quiz de aquecimento antes da aula
- aula escrita
- para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
> **Uma nota sobre os questionários**: Todos os questionários estão contidos na pasta Quiz-app, totalizando 48 questionários com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de questionários pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
> **Uma observação sobre os quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Aulas
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| 01 | Primeiros Passos | Introdução à Programação e Ferramentas de Trabalho | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre os softwares que ajudam desenvolvedores | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Primeiros Passos | Noções básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto e colaborar com outros em um código base | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos da acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprenda como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | Prática de HTML | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | Prática de CSS | Construa o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construa um Jogo de Digitação | Aprenda como usar eventos de teclado para conduzir a lógica do 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, sua história e como estruturar os primeiros elementos de uma extensão de 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 local storage | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no local storage | [APIs, Formulários e Local Storage](./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 na web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho na web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Avançados com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, como preparação para construir um jogo | [Introdução ao Desenvolvimento de Jogos Avançados](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./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 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 aos outros usando teclas e forneça uma função de cooldown 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) | Contabilizando pontos | Realize cálculos matemáticos com base no status e desempenho do jogo | [Contabilizando Pontos](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis | [Condição de Término](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipáginas usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda sobre como construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Obtenção e Uso de Dados | Como os dados fluem para dentro e fora do seu aplicativo, como obtê-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu aplicativo mantém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código do Navegador/VSCode](../../8-code-editor) | Trabalhando com VSCode | Aprenda como usar um editor de código | [Usando o Editor de Código VSCode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 01 | Primeiros Passos | Introdução à Programação e Ferramentas de Trabalho | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Primeiros Passos | Noções Básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto e colaborar com outros em um código base | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprenda como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construa um Jogo de Digitação | Aprenda como usar eventos de teclado para conduzir a lógica do 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, sua história e como estruturar os primeiros elementos de uma extensão de 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 local storage | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no local storage | [APIs, Formulários e Local Storage](./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 na web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho na web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./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 | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento de Jogos Avançado](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./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 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ões | Faça os elementos colidirem e reagirem uns aos outros usando teclas pressionadas e forneça uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a Pontuação | Realize cálculos matemáticos com base no status e 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) | Finalizando e Reiniciando o Jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar os recursos e redefinir valores de variáveis | [Condição de Finalização](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipágina usando rotas e templates HTML| [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda sobre como construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Busca e Uso de Dados | Como os dados fluem dentro e fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu aplicativo mantém o estado e como gerenciá-lo programaticamente| [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Editor de Código Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda como usar um editor de código | [Usando o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda como construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos principais em mente:
* aprendizado baseado em projetos
* questionários frequentes
* quizzes frequentes
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática ao construir um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo "space invaders" e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma sólida compreensão do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo "space invader" e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
> 🎓 Você pode fazer as primeiras aulas deste currículo como um [Caminho de Aprendizado](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 aulas introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriais em vídeo, alguns dos quais foram contribuídos pelos autores deste currículo.
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 aulas introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos quais os autores contribuíram para este currículo.
Além disso, um questionário de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo questionário após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser realizado em sua totalidade ou em partes. Os projetos começam pequenos e se tornam cada vez mais complexos ao final do ciclo de 12 semanas.
Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito em sua totalidade ou em partes. Os projetos começam pequenos e se tornam cada vez mais complexos ao final do ciclo de 12 semanas.
Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para nos concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo após concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
@ -207,48 +205,47 @@ Um PDF de todas as aulas pode ser encontrado [aqui](https://microsoft.github.io/
Nossa equipe produz outros cursos! Confira:
### Azure / Edge / MCP / Agentes
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série de IA Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Se você estiver com dificuldades ou tiver dúvidas sobre como criar aplicativos de IA, participe:
Se você ficar preso ou tiver dúvidas sobre como construir aplicativos de IA, junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
[](https://aka.ms/foundry/discord)
Se você tiver feedback sobre produtos ou encontrar erros durante o desenvolvimento, visite:
[](https://aka.ms/foundry/forum)
[](https://aka.ms/foundry/forum)
## Licença
@ -256,5 +253,7 @@ Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Opi web-kehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista keskittyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella pedagogiikallamme. Aloita koodausmatkasi jo tänään!
Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visoihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella lähestymistavallamme. Aloita koodausmatkasi jo tänään!
Liity Azure AI Foundry Discord -yhteisöön
Liity Azure AI Foundry Discord -yhteisöön
[](https://discord.com/invite/ByRwuEEgH4)
**Jos haluat lisätä tuettuja kieliä, ne on listattu [täällä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jos haluat lisätä uusia käännöksiä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Oletko opiskelija?_
#### 🧑🎓 _Oletko opiskelija?_
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille suunnattuja resursseja, opiskelijapakkauksia ja jopa mahdollisuuden saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältöä päivitetään kuukausittain.
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloitteleville suunnattuja resursseja, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältö vaihtuu kuukausittain.
### 📣 Ilmoitus - Uusia GitHub Copilot Agent -tilan haasteita!
### 📣 Ilmoitus - Uusia GitHub Copilot Agent -haasteita!
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei ainoastaan luo tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja paljon muuta.
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa GitHub Copilotin ja Agent-tilan avulla. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei vain luo tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja paljon muuta.
### 📣 Ilmoitus - _Uusi projekti Generatiivisen tekoälyn avulla_
### 📣 Ilmoitus - _Uusi projekti Generative AI:n avulla_
Uusi AI Assistant -projekti juuri lisätty, tutustu siihen [projekti](./09-chat-project/README.md)
Uusi AI Assistant -projekti on juuri lisätty, tutustu siihen [projekti](./09-chat-project/README.md)
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille julkaistu
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generative AI:sta JavaScriptille julkaistu
Älä missaa uutta Generatiivisen tekoälyn opetussuunnitelmaamme!
Älä missaa uutta Generative AI -opetussuunnitelmaamme!
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) tämän opetussuunnitelman käyttöön. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
## 🌱 Aloittaminen
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaisessa oppitunnissa aloita ennakkotestillä ja jatka lukemalla oppimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkitestillä.
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten käyttää tätä opetussuunnitelmaa. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa työskennelläksesi projekteissa yhdessä! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaisessa oppitunnissa aloita ennakkovisailulla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkivisailulla.
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja työskentele projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva ympäristö, ei asennuksia tarvita_) vai paikallisesti tietokoneellasi käyttämällä tekstieditoria, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
### 📋 Ympäristön asettaminen
#### Luo oma arkistosi
Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä arkistosta. Voit tehdä tämän klikkaamalla **Käytä tätä mallia** -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi kopiona opetussuunnitelmasta.
Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko käyttää opetussuunnitelmaa [Codespacessa](https://github.com/features/codespaces/) (_selaimen kautta, ei asennuksia tarvitaan_), vai paikallisesti tietokoneellasi tekstieditorin, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), avulla.
Seuraa näitä ohjeita:
1. **Haarauta arkisto**: Klikkaa "Fork"-painiketta tämän sivun oikeassa yläkulmassa.
Jotta voit helposti tallentaa työsi, suosittelemme, että luot oman kopion tästä arkistosta. Voit tehdä tämän napsauttamalla **Käytä tätä mallia** -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi kopion opetussuunnitelmasta.
Omassa kopiossasi tästä arkistosta, jonka loit, klikkaa **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä.
Kopioimassasi arkistossa, jonka loit, napsauta **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä.
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdanto ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut.
Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdatus ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut.
1. Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän klikkaamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
Suosittelemme käyttämään [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
[CodeSpace](./images/createcodespace.png)
1. Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
[CodeSpace](./images/createcodespace.png)
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
```bash
git clone <your-repository-url>
```
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän klikkaamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
> Suositellut Visual Studio Code -laajennukset:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
> Suositellut Visual Studio Code -laajennukset:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin
## 📂 Jokainen oppitunti sisältää:
- valinnainen luonnoskuva
- valinnainen luonnosmuistiinpano
- valinnainen lisävideo
- alkulämmittelykysely ennen oppituntia
- kirjallinen oppitunti
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
> **Huomio kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa on kolme kysymystä kussakin. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/web/), ja kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
> **Huomio kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/web/), ja kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
## 🗃️ Oppitunnit
| | Projektin nimi | Opetettavat käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistoista, jotka auttavat ammattilaisia työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloittaminen | GitHubin perusteet, sisältäen tiimityöskentelyn | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjan parissa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS-perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallinnassa | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS-perusteet | Päätöksenteko JS:llä | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-perusteet | Taulukot ja silmukat | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi verkkoterrariumin, keskittyen ulkoasun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi verkkoterrariumin, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptin sulkeet, DOM-manipulaatio | Rakenna JavaScript, jotta terrarium toimii vedä ja pudota -käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulaatioon | [JavaScriptin sulkeet, DOM-manipulaatio](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 01 | Aloitetaan | Johdatus ohjelmointiin ja työkaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloitetaan | GitHubin perusteet, sisältää tiimityöskentelyn | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS:n perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS:n perusteet | Päätöksenteko JS:llä | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS:n perusteet | Taulukot ja silmukat | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terraario](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi verkkoterraarion, keskittyen asettelun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terraario](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi verkkoterraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terraario](./3-terrarium/solution/README.md) | JavaScriptin sulkeumat, DOM-manipulointi | Rakenna JavaScript, jotta terraario toimii vedä/pudota-käyttöliittymänä, keskittyen sulkeumiin ja DOM-manipulointiin | [JavaScriptin sulkeumat, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Kirjoituspeli](./4-typing-game/solution/README.md) | Rakenna kirjoituspeli | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten selainlaajennuksen ensimmäiset elementit rakennetaan | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna JavaScript-elementit selainlaajennuksellesi kutsuaksesi API:n käyttäen paikalliseen muistiin tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen muisti](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitaksesi laajennuksen kuvaketta; opi verkkosuorituskyvystä ja joistakin optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Avaruuspeli](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opi perimästä käyttäen sekä luokkia että koostumusta ja Pub/Sub-mallia, valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Avaruuspeli](./6-space-game/solution/README.md) | Piirtäminen canvasille | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen canvasille](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Avaruuspeli](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Opi, miten elementit voivat saada liikkeen käyttämällä suorakulmaisia koordinaatteja ja Canvas API:ta | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Avaruuspeli](./6-space-game/solution/README.md) | Törmäysten tunnistus | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [Törmäysten tunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 12 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten luoda selainlaajennuksen ensimmäiset elementit | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallentaminen paikallisesti | Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikallisesti tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Avaruuspeli](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opi perimästä käyttäen sekä luokkia että koostumusta sekä Pub/Sub-mallia pelin rakentamisen valmistelussa | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Avaruuspeli](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Avaruuspeli](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Opi, miten elementit voivat liikkua käyttäen koordinaatistoa ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Avaruuspeli](./6-space-game/solution/README.md) | Törmäyksen tunnistus | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [Törmäyksen tunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Avaruuspeli](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Avaruuspeli](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistäminen | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusrakenne käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakemisen ja käytön menetelmät | Miten data kulkee sisään ja ulos sovelluksestasi, miten sitä haetaan, tallennetaan ja hävitetään | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 20 | [Avaruuspeli](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opi rakentamaan lomakkeita ja käsittelemään validointirutiineja | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakemisen ja käytön menetelmät | Miten data virtaa sovellukseesi, miten sitä haetaan, tallennetaan ja hävitetään | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Selain/VScode-koodi](../../8-code-editor) | Työskentely VScodessa | Opi käyttämään koodieditoria| [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI-avustajat](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustaja | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris |
| 25 | [Selain/VSCode-koodi](../../8-code-editor) | Työskentely VSCode:lla | Opi käyttämään koodieditoria | [Käytä VSCode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI-avustajat](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustaja | [Tekoälyavustajaprojekti](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiikka
Opetussuunnitelmamme perustuu kahteen keskeiseen pedagogiseen periaatteeseen:
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektipohjainen oppiminen
* usein toistuvat kyselyt
* toistuvat kyselyt
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykyajan verkkokehittäjät käyttävät. Opiskelijat saavat mahdollisuuden hankkia käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän verkkokehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraarion, ympäristöystävällisen selainlaajennuksen, avaruusinvader-tyylisen pelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.
> 🎓 Voit käydä tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina Microsoft Learn -sivustolla!
> 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina Microsoft Learnissa!
Varmistamalla, että sisältö liittyy projekteihin, prosessista tehdään opiskelijoille kiinnostavampi ja käsitteiden omaksuminen paranee. Kirjoitimme myös useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, ja ne on yhdistetty videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, jonka jotkut tämän opetussuunnitelman kirjoittajat ovat tehneet.
Varmistamalla, että sisältö liittyy projekteihin, prosessi on opiskelijoille kiinnostavampi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen.
Lisäksi matalan kynnyksen kysely ennen oppituntia ohjaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa käsitteiden paremman omaksumisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi käydä kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
Lisäksi matalan kynnyksen kysely ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjän tarvitsemiin perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi oppia Node.js:stä toisen videokokoelman avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjänä tarvittaviin perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi oppia Node.js:stä toisen videosarjan kautta: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu [Code of Conduct](CODE_OF_CONDUCT.md) ja [Contributing](CONTRIBUTING.md) -ohjeisiimme. Otamme mielellämme vastaan rakentavaa palautetta!
> Tutustu [käytännesääntöihimme](CODE_OF_CONDUCT.md) ja [ohjeisiin osallistumiseen](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
## 🧭 Offline-käyttö
Voit käyttää tätä dokumentaatiota offline-tilassa [Docsify](https://docsify.js.org/#/) avulla. Haaroita tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita sitten tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa koneessasi: `localhost:3000`.
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 localhostissasi: `localhost:3000`.
## 📘 PDF
PDF kaikista oppitunneista löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Muut kurssit
@ -226,7 +222,7 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
@ -245,19 +241,21 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
## Apua saatavilla
Jos jäät jumiin tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity:
Jos jäät jumiin tai sinulla on kysymyksiä tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukevainen yhteisö, jossa kysymykset ovat tervetulleita ja tietoa jaetaan avoimesti.
[](https://aka.ms/foundry/discord)
Jos sinulla on tuotepalautetta tai kohtaat virheitä rakentaessasi, vieraile:
Jos sinulla on tuotepalautetta tai virheitä rakentamisen aikana, vieraile:
[](https://aka.ms/foundry/forum)
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso [LICENSE](../../LICENSE) tiedosto saadaksesi lisätietoja.
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso [LICENSE](../../LICENSE) tiedosto saadaksesi lisätietoja.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
למדו את יסודות פיתוח האתרים עם הקורס המקיף שלנו בן 12 שבועות בהנחיית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, הרחבות לדפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם וייעלו את שימור הידע שלכם עם הפדגוגיה האפקטיבית שלנו המבוססת על פרויקטים. התחילו את מסע הקידוד שלכם היום!
למדו את יסודות פיתוח האתרים עם קורס מקיף של 12 שבועות מבית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, הרחבות לדפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם והעצימו את שימור הידע שלכם עם שיטת הלימוד מבוססת הפרויקטים שלנו. התחילו את מסע הקידוד שלכם היום!
הצטרפו לקהילת Azure AI Foundry Discord
[](https://discord.com/invite/ByRwuEEgH4)
**אם תרצו להוסיף שפות נוספות, רשימת השפות הנתמכות נמצאת [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**אם תרצו להוסיף שפות נוספות, השפות הנתמכות מפורטות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
@ -46,15 +48,15 @@ CO_OP_TRANSLATOR_METADATA:
בקרו ב-[**עמוד הסטודנטים**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצאו משאבים למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה בחינם. זהו עמוד שכדאי לשמור ולבדוק מדי פעם, שכן אנו מעדכנים את התוכן מדי חודש.
### 📣 הודעה - אתגרי מצב סוכן חדש של GitHub Copilot להשלמה!
### 📣 הכרזה - אתגרי מצב סוכן של GitHub Copilot חדשים להשלמה!
אתגר חדש נוסף, חפשו את "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זהו אתגר חדש עבורכם להשלמה באמצעות GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן בעבר, הוא מסוגל לא רק לייצר טקסט אלא גם ליצור ולערוך קבצים, להריץ פקודות ועוד.
### 📣 הודעה - _פרויקט חדש לבנייה באמצעות AI גנרטיבי_
### 📣 הכרזה - _פרויקט חדש לבנייה באמצעות AI גנרטיבי_
פרויקט עוזר AI חדש נוסף, בדקו אותו [פרויקט](./09-chat-project/README.md)
### 📣 הודעה - _תוכנית לימודים חדשה_ על AI גנרטיבי ל-JavaScript שוחררה
### 📣 הכרזה - _תוכנית לימודים חדשה_ על AI גנרטיבי ל-JavaScript שוחררה
אל תפספסו את תוכנית הלימודים החדשה שלנו על AI גנרטיבי!
@ -64,24 +66,24 @@ CO_OP_TRANSLATOR_METADATA:
- שיעורים המכסים הכל מהבסיס ועד RAG.
- אינטראקציה עם דמויות היסטוריות באמצעות GenAI ואפליקציית הליווי שלנו.
כל שיעור כולל משימה להשלמה, בדיקת ידע ואתגר שינחה אתכם בלימוד נושאים כמו:
- יצירת הנחיות והנדסת הנחיות
- הנחיה והנדסת הנחיות
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!
## 🌱 איך מתחילים
## 🌱 התחלה
> **מורים**, אנו [הוספנו כמה הצעות](for-teachers.md) כיצד להשתמש בתוכנית הלימודים הזו. נשמח לשמוע את דעתכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **מורים**, כללנו [כמה הצעות](for-teachers.md) כיצד להשתמש בתוכנית הלימודים הזו. נשמח לשמוע את דעתכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, בכל שיעור, התחילו בחידון מקדים והמשיכו בקריאת חומרי השיעור, השלימו את הפעילויות השונות ובדקו את הבנתכם עם החידון שלאחר השיעור.
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, לכל שיעור, התחילו עם חידון לפני השיעור והמשיכו בקריאת חומר השיעור, השלמת הפעילויות השונות ובדקו את הבנתכם עם חידון לאחר השיעור.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם חברים כדי לעבוד יחד על הפרויקטים! דיונים מעודדים ב-[פורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המנחים שלנו יהיה זמין לענות על שאלותיכם.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם עמיתים לעבודה על הפרויקטים יחד! דיונים מעודדים בפורום הדיונים שלנו [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המנהלים שלנו יהיה זמין לענות על שאלותיכם.
כדי להרחיב את השכלתכם, אנו ממליצים מאוד לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) עבור חומרי לימוד נוספים.
@ -89,30 +91,30 @@ CO_OP_TRANSLATOR_METADATA:
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כשאתם מתחילים, תוכלו לבחור להריץ את התוכנית הלימודים ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן, ללא צורך בהתקנות_), או מקומית על המחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### צרו את המאגר שלכם
כדי לשמור את העבודה שלכם בקלות, מומלץ ליצור עותק משלכם של מאגר זה. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש העמוד. זה ייצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים.
#### יצירת המאגר שלכם
כדי לשמור את העבודה שלכם בקלות, מומלץ ליצור עותק משלכם של המאגר הזה. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש העמוד. זה ייצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים.
עקבו אחר השלבים הבאים:
1. **צרו מזלג למאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של עמוד זה.
2. **שכפלו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **עשו Fork למאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של העמוד הזה.
2. **שכפלו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### הרצת תוכנית הלימודים ב-Codespace
בעותק של המאגר שיצרתם, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. זה ייצור עבורכם Codespace חדש לעבודה.
בעותק שלכם של המאגר שיצרתם, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. זה ייצור Codespace חדש עבורכם לעבוד בו.
#### הרצת תוכנית הלימודים באופן מקומי על המחשב שלכם
#### הרצת תוכנית הלימודים מקומית על המחשב שלכם
כדי להריץ את תוכנית הלימודים באופן מקומי על המחשב שלכם, תצטרכו עורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), ידריך אתכם דרך אפשרויות שונות לכל אחד מהכלים הללו כדי שתוכלו לבחור את מה שמתאים לכם ביותר.
כדי להריץ את תוכנית הלימודים מקומית על המחשב שלכם, תצטרכו עורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי העבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), ידריך אתכם דרך אפשרויות שונות לכלים אלו כדי שתוכלו לבחור את מה שמתאים לכם ביותר.
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, שיש לו גם [טרמינל מובנה](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). תוכלו להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, שיש לו גם [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. תוכלו להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. שכפלו את המאגר שלכם למחשב. תוכלו לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת ה-URL:
[CodeSpace](./images/createcodespace.png)
לאחר מכן, פתחו את [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והריצו את הפקודה הבאה, החליפו `<your-repository-url>` ב-URL שהעתקתם:
לאחר מכן, פתחו [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והריצו את הפקודה הבאה, החליפו `<your-repository-url>` ב-URL שהעתקתם:
```bash
git clone <your-repository-url>
@ -120,62 +122,62 @@ CO_OP_TRANSLATOR_METADATA:
2. פתחו את התיקייה ב-Visual Studio Code. תוכלו לעשות זאת על ידי לחיצה על **File** > **Open Folder** ובחירת התיקייה ששכפלתם.
> הרחבות מומלצות ל-Visual Studio Code:
> הרחבות מומלצות ל-Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - לצפייה מקדימה בדפי HTML בתוך Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - לעזור לכם לכתוב קוד מהר יותר
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - כדי להציג דפי HTML בתוך Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - לעזור לכם לכתוב קוד מהר יותר
## 📂 כל שיעור כולל:
- סקיצה אופציונלית
- סרטון משלים אופציונלי
- שאלון חימום לפני השיעור
- שיעור כתוב
- עבור שיעורים מבוססי פרויקטים, מדריכים שלב אחר שלב לבניית הפרויקט
- בדיקות ידע
- אתגר
- קריאה משלימה
- משימה
- [שאלון לאחר השיעור](https://ff-quizzes.netlify.app/web/)
- סקיצה אופציונלית
- סרטון משלים אופציונלי
- חידון חימום לפני השיעור
- שיעור כתוב
- עבור שיעורים מבוססי פרויקטים, מדריכים שלב אחר שלב כיצד לבנות את הפרויקט
- בדיקות ידע
- אתגר
- קריאה משלימה
- משימה
- [חידון לאחר השיעור](https://ff-quizzes.netlify.app/web/)
> **הערה לגבי שאלונים**: כל השאלונים נמצאים בתיקיית Quiz-app, סה"כ 48 שאלונים עם שלוש שאלות בכל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) וניתן להפעיל את אפליקציית השאלונים באופן מקומי או לפרוס אותה ב-Azure; עקבו אחר ההוראות בתיקיית `quiz-app`.
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סה"כ 48 חידונים עם שלוש שאלות בכל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) וניתן להפעיל את אפליקציית החידונים באופן מקומי או לפרוס אותה ב-Azure; עקבו אחר ההוראות בתיקיית `quiz-app`.
## 🗃️ שיעורים
| | שם הפרויקט | מושגים נלמדים | מטרות למידה | קישור לשיעור | מחבר |
| | שם הפרויקט | מושגים נלמדים | מטרות למידה | שיעור מקושר | מחבר |
| 01 | התחלה | מבוא לתכנות וכלי העבודה | למדו את היסודות מאחורי רוב שפות התכנות ואת התוכנות שעוזרות למפתחים מקצועיים לבצע את עבודתם | [מבוא לשפות תכנות וכלי העבודה](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלכם, כיצד לשתף פעולה עם אחרים על בסיס קוד | [מבוא ל-GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | התחלה | נגישות | למדו את היסודות של נגישות באינטרנט | [יסודות הנגישות](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | התחלה | נגישות | למדו את היסודות של נגישות באינטרנט | [יסודות נגישות](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי נתונים ב-JavaScript | [סוגי נתונים](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | יסודות JS | פונקציות ושיטות | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה | [פונקציות ושיטות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 05 | יסודות JS | פונקציות ושיטות | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של אפליקציה | [פונקציות ושיטות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [טרריום](./3-terrarium/solution/README.md) | HTML בפועל | בניית HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [טרריום](./3-terrarium/solution/README.md) | CSS בפועל | בניית CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות CSS כולל הפיכת הדף לרספונסיבי | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [טרריום](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | בניית JavaScript כדי לגרום לטרריום לפעול כממשק גרירה/שחרור, תוך התמקדות בסגירות ובמניפולציה של DOM | [סגירות JavaScript, מניפולציה של DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [משחק הקלדה](./4-typing-game/solution/README.md) | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית JavaScript שלכם | [תכנות מונחה אירועים](./4-typing-game/typing-game/README.md) | Christopher |
| 08 | [טרריום](./3-terrarium/solution/README.md) | HTML בפועל | בניית ה-HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [טרריום](./3-terrarium/solution/README.md) | CSS בפועל | בניית ה-CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות CSS כולל הפיכת הדף לרספונסיבי | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [טרריום](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | בניית ה-JavaScript כדי לגרום לטרריום לתפקד כממשק גרירה/שחרור, תוך התמקדות בסגירות ובמניפולציה של DOM | [סגירות JavaScript, מניפולציה של DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [משחק הקלדה](./4-typing-game/solution/README.md) | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלכם | [תכנות מונחה אירועים](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | למדו כיצד דפדפנים עובדים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | [על דפדפנים](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בניית אלמנטים JavaScript של תוסף הדפדפן שלכם כדי לקרוא ל-API באמצעות משתנים המאוחסנים באחסון מקומי | [APIs, טפסים ואחסון מקומי](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | תהליכים ברקע בדפדפן, ביצועי רשת | השתמשו בתהליכים ברקע של הדפדפן כדי לנהל את סמל התוסף; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור | [משימות ברקע וביצועים](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 13 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בניית אלמנטי JavaScript של תוסף הדפדפן שלכם כדי לקרוא ל-API באמצעות משתנים המאוחסנים באחסון מקומי | [APIs, טפסים ואחסון מקומי](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | תהליכים ברקע בדפדפן, ביצועי רשת | שימוש בתהליכים ברקע של הדפדפן לניהול אייקון התוסף; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור | [משימות ברקע וביצועים](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [משחק חלל](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר עם JavaScript | למדו על ירושה באמצעות גם מחלקות וגם קומפוזיציה ודפוס Pub/Sub, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור עלקנבס | למדו על Canvas API, המשמש לציור אלמנטים על המסך | [ציור עלקנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים על המסך](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | זיהוי התנגשות | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים וספקו פונקציית קירור כדי להבטיח ביצועי המשחק | [זיהוי התנגשות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | שמירת ניקוד | בצעו חישובים מתמטיים בהתבסס על מצב המשחק וביצועיו | [שמירת ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור לקנבס | למדו על Canvas API, המשמש לציור אלמנטים למסך | [ציור לקנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | זיהוי התנגשות | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים וספקו פונקציית קירור כדי להבטיח ביצועי משחק | [זיהוי התנגשות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | שמירת ניקוד | ביצוע חישובים מתמטיים בהתבסס על מצב המשחק וביצועיו | [שמירת ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום והתחלה מחדש של המשחק | למדו על סיום והתחלה מחדש של המשחק, כולל ניקוי נכסים ואיפוס ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | למדו כיצד ליצור את המבנה של ארכיטקטורת אתר מרובה עמודים באמצעות נתיבים ותבניות HTML | [תבניות HTML ונתיבים](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס כניסה ורישום | למדו על בניית טפסים וטיפול ברוטינות אימות | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | שיטות של הבאת נתונים ושימוש בהם | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד להביא אותם, לאחסן אותם ולהיפטר מהם | [נתונים](./7-bank-project/3-data/README.md) | Yohan |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס כניסה וטופס הרשמה | למדו על בניית טפסים וטיפול ברוטינות אימות | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | שיטות לאחזור ושימוש בנתונים | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד לאחזר אותם, לאחסן אותם ולהיפטר מהם | [נתונים](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | מושגים של ניהול מצב | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו באופן תכנותי | [ניהול מצב](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [קוד דפדפן/VScode](../../8-code-editor) | עבודה עם VScode | למדו כיצד להשתמש בעורך קוד| [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [קוד דפדפן/VScode](../../8-code-editor) | עבודה עם VScode | למדו כיצד להשתמש בעורך קוד| [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [עוזרי AI](./9-chat-project/README.md) | עבודה עם AI | למדו כיצד לבנות עוזר AI משלכם | [פרויקט עוזר AI](./9-chat-project/README.md) | Chris |
## 🏫 פדגוגיה
תוכנית הלימודים שלנו עוצבה עם שני עקרונות פדגוגיים מרכזיים:
* למידה מבוססת פרויקטים
* שאלונים תכופים
* למידה מבוססת פרויקטים
* חידונים תכופים
התוכנית מלמדת את יסודות JavaScript, HTML ו-CSS, כמו גם הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי רשת כיום. התלמידים יקבלו הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פולש חלל ואפליקציית בנקאות לעסקים. בסוף הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח רשת.
@ -183,12 +185,13 @@ CO_OP_TRANSLATOR_METADATA:
על ידי הבטחת התאמת התוכן לפרויקטים, התהליך נעשה יותר מרתק עבור התלמידים ושימור המושגים יוגבר. בנוסף, כתבנו מספר שיעורי פתיחה ביסודות JavaScript כדי להציג מושגים, יחד עם סרטון מתוך אוסף "[סדרת מתחילים ל-JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" של מדריכי וידאו, שחלק מהכותבים שלהם תרמו לתוכנית הלימודים הזו.
בנוסף, שאלון בעל סיכון נמוך לפני השיעור מכוון את כוונת התלמיד ללמידת נושא, בעוד שאלון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים הזו עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים מורכבים יותר בסוף מחזור של 12 שבועות.
בנוסף, חידון בעל סיכון נמוך לפני השיעור מכוון את כוונת התלמיד ללמידת נושא, בעוד שחידון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים הזו עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים מורכבים יותר בסוף מחזור של 12 שבועות.
בעוד שבכוונה נמנענו מהצגת מסגרות JavaScript כדי להתמקד במיומנויות הבסיסיות הנדרשות כמפתח רשת לפני אימוץ מסגרת, צעד טוב הבא לאחר השלמת תוכנית הלימודים הזו יהיה ללמוד על Node.js באמצעות אוסף נוסף של סרטונים: "[סדרת מתחילים ל-Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
בעוד שבכוונה נמנענו מהצגת מסגרות 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) שלנו. נשמח לקבל את המשוב הבונה שלכם!
## 🧭 גישה לא מקוונת
ניתן להפעיל את התיעוד הזה באופן לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). עשו Fork למאגר הזה, [התקינו את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של המאגר הזה, הקלידו `docsify serve`. האתר יוגש על פורט 3000 ב-localhost שלכם: `localhost:3000`.
@ -197,12 +200,14 @@ CO_OP_TRANSLATOR_METADATA:
ניתן למצוא PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
אם אתם נתקעים או יש לכם שאלות על בניית אפליקציות AI, הצטרפו:
אם אתם נתקעים או יש לכם שאלות על בניית אפליקציות AI, הצטרפו ללומדים אחרים ולמפתחים מנוסים בדיונים על MCP. זו קהילה תומכת שבה שאלות מתקבלות בברכה וידע משותף בחופשיות.
[](https://aka.ms/foundry/discord)
אם יש לכם משוב על מוצרים או שגיאות בזמן הבנייה, בקרו:
אם יש לכם משוב על מוצרים או נתקלתם בשגיאות במהלך הבנייה, בקרו ב:
[](https://aka.ms/foundry/forum)
מסמך זה תורגם באמצעות שירות תרגום AI [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נושאים באחריות לכל אי הבנות או פרשנויות שגויות הנובעות משימוש בתרגום זה.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום AI [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
Ciao, futuro sviluppatore! 👋 Pronto a unirti a milioni di programmatori in tutto il mondo? Sono davvero entusiasta di presentarti GitHub – pensalo come il social network per programmatori, ma invece di condividere foto del tuo pranzo, condividiamo codice e costruiamo cose incredibili insieme!
Ciao, futuro sviluppatore! 👋 Pronto a unirti a milioni di programmatori in tutto il mondo? Sono davvero entusiasta di presentarti GitHub – pensalo come un social network per programmatori, ma invece di condividere foto del tuo pranzo, condividiamo codice e costruiamo cose incredibili insieme!
Ecco cosa mi lascia senza parole: ogni app sul tuo telefono, ogni sito web che visiti e la maggior parte degli strumenti che imparerai a usare sono stati creati da team di sviluppatori che collaborano su piattaforme proprio come GitHub. Quell'app musicale che ami? Qualcuno come te ha contribuito a crearla. Quel gioco a cui non riesci a smettere di giocare? Sì, probabilmente è stato costruito grazie alla collaborazione su GitHub. E ora TU stai per imparare come far parte di questa straordinaria comunità!
Ecco cosa mi lascia sempre a bocca aperta: ogni app sul tuo telefono, ogni sito web che visiti e la maggior parte degli strumenti che imparerai a usare sono stati creati da team di sviluppatori che collaborano su piattaforme come GitHub. Quell'app musicale che ami? Qualcuno come te ha contribuito a crearla. Quel gioco a cui non riesci a smettere di giocare? Sì, probabilmente è stato costruito con la collaborazione su GitHub. E ora TU stai per imparare come far parte di questa straordinaria comunità!
So che all'inizio potrebbe sembrare tutto un po' complicato – ricordo di aver fissato la mia prima pagina GitHub pensando "Che cosa significa tutto questo?" Ma ecco il punto: ogni singolo sviluppatore ha iniziato esattamente dove sei tu ora. Alla fine di questa lezione, avrai il tuo repository GitHub personale (pensalo come la tua vetrina di progetti nel cloud), e saprai come salvare il tuo lavoro, condividerlo con gli altri e persino contribuire a progetti utilizzati da milioni di persone.
So che all'inizio potrebbe sembrare tutto un po' complicato – ricordo ancora quando ho guardato la mia prima pagina su GitHub pensando "Ma cosa significa tutto questo?". Ma ecco il punto: ogni singolo sviluppatore è partito esattamente da dove sei tu ora. Alla fine di questa lezione, avrai il tuo repository GitHub personale (pensalo come il tuo spazio per mostrare i tuoi progetti nel cloud) e saprai come salvare il tuo lavoro, condividerlo con gli altri e persino contribuire a progetti utilizzati da milioni di persone.
Faremo questo viaggio insieme, passo dopo passo. Niente fretta, niente pressione – solo tu, io e alcuni strumenti davvero fantastici che stanno per diventare i tuoi nuovi migliori amici!
Faremo questo viaggio insieme, un passo alla volta. Niente fretta, niente pressione – solo tu, io e alcuni strumenti davvero fantastici che stanno per diventare i tuoi nuovi migliori amici!
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
Prima di immergerci nelle cose davvero entusiasmanti, prepariamo il tuo computer per un po' di magia con GitHub! Pensalo come organizzare i tuoi materiali artistici prima di creare un capolavoro – avere gli strumenti giusti pronti rende tutto più semplice e molto più divertente.
Prima di immergerci nelle cose davvero entusiasmanti, prepariamo il tuo computer per un po' di magia con GitHub! Pensalo come organizzare i tuoi materiali artistici prima di creare un capolavoro – avere gli strumenti giusti pronti rende tutto più fluido e molto più divertente.
Ti guiderò personalmente attraverso ogni passaggio di configurazione, e ti prometto che non è così intimidatorio come potrebbe sembrare a prima vista. Se qualcosa non ti è chiaro subito, è assolutamente normale! Ricordo di aver configurato il mio primo ambiente di sviluppo e di sentirmi come se stessi cercando di decifrare geroglifici antichi. Ogni singolo sviluppatore è stato esattamente dove sei tu ora, chiedendosi se stava facendo tutto nel modo giusto. Spoiler: se sei qui a imparare, stai già facendo tutto nel modo giusto! 🌟
Ti guiderò personalmente attraverso ogni passaggio di configurazione, e ti prometto che non è così intimidatorio come potrebbe sembrare a prima vista. Se qualcosa non ti è chiaro subito, è del tutto normale! Ricordo quando ho configurato il mio primo ambiente di sviluppo e mi sembrava di cercare di decifrare geroglifici antichi. Ogni singolo sviluppatore è stato esattamente dove sei tu ora, chiedendosi se stava facendo tutto nel modo giusto. Spoiler: se sei qui a imparare, stai già facendo tutto nel modo giusto! 🌟
In questa lezione, affronteremo:
In questa lezione, vedremo:
- come tracciare il lavoro che fai sul tuo computer
- come lavorare su progetti con altre persone
@ -54,9 +53,9 @@ In questa lezione, affronteremo:
### Prerequisiti
Prepariamo il tuo computer per un po' di magia con GitHub! Non preoccuparti – questa configurazione è qualcosa che devi fare solo una volta, e poi sarai pronto per tutto il tuo percorso di programmazione.
Prepariamo il tuo computer per un po' di magia con GitHub! Non preoccuparti – questa configurazione è qualcosa che devi fare solo una volta, e poi sarai pronto per tutto il tuo viaggio nel mondo del coding.
Bene, iniziamo con le basi! Per prima cosa, dobbiamo verificare se Git è già installato sul tuo computer. Git è praticamente come avere un assistente superintelligente che ricorda ogni singola modifica che fai al tuo codice – molto meglio che premere freneticamente Ctrl+S ogni due secondi (ci siamo passati tutti!).
Bene, iniziamo con le basi! Prima di tutto, dobbiamo verificare se Git è già installato sul tuo computer. Git è praticamente come avere un assistente super-intelligente che ricorda ogni singola modifica che fai al tuo codice – molto meglio che premere freneticamente Ctrl+S ogni due secondi (ci siamo passati tutti!).
Vediamo se Git è già installato digitando questo comando magico nel tuo terminale:
`git --version`
@ -77,7 +76,7 @@ git config --list
Avrai anche bisogno di un account GitHub, un editor di codice (come Visual Studio Code) e dovrai aprire il tuo terminale (o: prompt dei comandi).
Vai su [github.com](https://github.com/) e crea un account se non lo hai già fatto, oppure accedi e completa il tuo profilo.
Vai su [github.com](https://github.com/) e crea un account se non l'hai già fatto, oppure accedi e completa il tuo profilo.
💡 **Consiglio moderno**: Considera di configurare [chiavi SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) o di utilizzare [GitHub CLI](https://cli.github.com/) per un'autenticazione più semplice senza password.
@ -87,7 +86,7 @@ Vai su [github.com](https://github.com/) e crea un account se non lo hai già fa
Avrai bisogno di una cartella con un progetto di codice sul tuo computer locale (laptop o PC) e di un repository pubblico su GitHub, che servirà come esempio per imparare a contribuire ai progetti degli altri.
### Proteggere il tuo codice
### Proteggere il Tuo Codice
Parliamo un momento di sicurezza – ma non preoccuparti, non ti sommergeremo con cose spaventose! Pensa a queste pratiche di sicurezza come chiudere a chiave la tua auto o la tua casa. Sono abitudini semplici che diventano naturali e proteggono il tuo duro lavoro.
@ -102,89 +101,88 @@ Quando lavori con GitHub, è importante seguire le migliori pratiche di sicurezz
| **Sicurezza del Repository** | Non commettere mai informazioni sensibili | Le chiavi API e le password non dovrebbero mai essere nei repository pubblici |
| **Gestione delle Dipendenze** | Abilita Dependabot per gli aggiornamenti | Mantiene le tue dipendenze sicure e aggiornate |
> ⚠️ **Promemoria Critico di Sicurezza**: Non commettere mai chiavi API, password o altre informazioni sensibili in alcun repository. Usa variabili d'ambiente e file `.gitignore` per proteggere i dati sensibili.
> ⚠️ **Promemoria Critico di Sicurezza**: Non commettere mai chiavi API, password o altre informazioni sensibili in un repository. Usa variabili d'ambiente e file `.gitignore` per proteggere i dati sensibili.
> 💡 **Consiglio Pro**: Le chiavi SSH eliminano la necessità di inserire ripetutamente le password e sono più sicure rispetto ai metodi di autenticazione tradizionali.
> 💡 **Consiglio Pro**: Le chiavi SSH eliminano la necessità di inserire ripetutamente le password e sono più sicure dei metodi di autenticazione tradizionali.
---
## Gestire il tuo codice come un professionista
## Gestire il Tuo Codice Come un Professionista
Ok, QUI è dove le cose diventano davvero entusiasmanti! 🎉 Stiamo per imparare come tracciare e gestire il tuo codice come fanno i professionisti, e onestamente, questa è una delle mie cose preferite da insegnare perché è una vera svolta.
Immagina questo: stai scrivendo una storia incredibile e vuoi tenere traccia di ogni bozza, ogni brillante modifica e ogni momento "aspetta, è geniale!" lungo il percorso. Questo è esattamente ciò che Git fa per il tuo codice! È come avere il più incredibile taccuino che viaggia nel tempo e ricorda TUTTO – ogni battitura, ogni modifica, ogni momento "oops, ho rotto tutto" che puoi annullare istantaneamente.
Immagina questo: stai scrivendo una storia incredibile e vuoi tenere traccia di ogni bozza, ogni brillante modifica e ogni momento "aspetta, è geniale!" lungo il percorso. Questo è esattamente ciò che Git fa per il tuo codice! È come avere il taccuino più incredibile che viaggia nel tempo e ricorda TUTTO – ogni battitura, ogni modifica, ogni momento "oops, ho rotto tutto" che puoi annullare all'istante.
Sarò sincero – all'inizio potrebbe sembrare travolgente. Quando ho iniziato, pensavo "Perché non posso semplicemente salvare i miei file normalmente?" Ma fidati di me: una volta che capirai Git (e lo farai!), avrai uno di quei momenti di illuminazione in cui penserai "Come ho fatto a programmare senza questo?" È come scoprire di poter volare quando hai sempre camminato ovunque!
Sarò onesto – all'inizio potrebbe sembrare travolgente. Quando ho iniziato, pensavo "Perché non posso semplicemente salvare i miei file come al solito?". Ma fidati di me: una volta che Git ti sarà chiaro (e lo sarà!), avrai uno di quei momenti di illuminazione in cui penserai "Come ho fatto a programmare senza questo?". È come scoprire di poter volare dopo aver camminato ovunque per tutta la vita!
Supponiamo che tu abbia una cartella localmente con un progetto di codice e vuoi iniziare a tracciare i tuoi progressi usando git - il sistema di controllo delle versioni. Alcuni paragonano l'uso di git a scrivere una lettera d'amore al tuo futuro io. Leggendo i tuoi messaggi di commit giorni, settimane o mesi dopo, sarai in grado di ricordare perché hai preso una decisione o di "annullare" una modifica – ovviamente, se scrivi buoni "messaggi di commit".
Supponiamo che tu abbia una cartella locale con un progetto di codice e voglia iniziare a tracciare i tuoi progressi usando git – il sistema di controllo delle versioni. Alcuni paragonano l'uso di git a scrivere una lettera d'amore al tuo futuro io. Leggendo i tuoi messaggi di commit giorni, settimane o mesi dopo, sarai in grado di ricordare perché hai preso una decisione o "annullare" una modifica – ovviamente, quando scrivi buoni "messaggi di commit".
```mermaid
flowchart TD
A[📁 Your Project Files] --> B{Is it a Git Repository?}
A[📁 I file del tuo progetto] --> B{È un repository Git?}
B -->|No| C[git init]
B -->|Yes| D[Make Changes]
B -->|Sì| D[Apporta modifiche]
C --> D
D --> E[git add .]
E --> F["git commit -m 'message'"]
E --> F["git commit -m 'messaggio'"]
F --> G[git push]
G --> H[🌟 Code on GitHub!]
G --> H[🌟 Codice su GitHub!]
H --> I{Want to collaborate?}
I -->|Yes| J[Fork & Clone]
H --> I{Vuoi collaborare?}
I -->|Sì| J[Fork & Clone]
I -->|No| D
J --> K[Create Branch]
K --> L[Make Changes]
J --> K[Crea Branch]
K --> L[Apporta modifiche]
L --> M[Pull Request]
M --> N[🎉 Contributing!]
M --> N[🎉 Contribuendo!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Compito: Crea il Tuo Primo Repository!
### Compito: Crea il tuo primo repository!
> 🎯 **La tua missione (e sono così entusiasta per te!)**: Creeremo insieme il tuo primo repository GitHub! Alla fine di questa attività, avrai il tuo piccolo angolo di internet dove vive il tuo codice, e avrai fatto il tuo primo "commit" (nel linguaggio degli sviluppatori, significa salvare il tuo lavoro in modo davvero intelligente).
> 🎯 **La Tua Missione (e sono così entusiasta per te!)**: Creeremo insieme il tuo primo repository GitHub! Quando avremo finito, avrai il tuo piccolo angolo di internet dove vive il tuo codice e avrai fatto il tuo primo "commit" (nel linguaggio degli sviluppatori, significa salvare il tuo lavoro in un modo davvero intelligente).
>
> Questo è davvero un momento speciale – stai per unirti ufficialmente alla comunità globale degli sviluppatori! Ricordo ancora l'emozione di creare il mio primo repository e pensare "Wow, lo sto davvero facendo!"
Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tuo tempo con ogni parte – non c'è premio per chi corre, e ti prometto che ogni singolo passaggio avrà senso. Ricorda, ogni superstar della programmazione che ammiri è stata una volta seduta esattamente dove sei tu, pronta a creare il suo primo repository. Quanto è fantastico?
Facciamo questa avventura insieme, passo dopo passo. Prenditi il tuo tempo per ogni parte – non c'è un premio per chi corre, e ti prometto che ogni singolo passaggio avrà senso. Ricorda, ogni superstar del coding che ammiri è stata una volta esattamente dove sei tu, pronta a creare il suo primo repository. Non è fantastico?
> Guarda il video
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Facciamolo insieme:**
**Facciamolo Insieme:**
1. **Crea il tuo repository su GitHub**. Vai su GitHub.com e cerca il pulsante verde brillante **New** (o il segno **+** nell'angolo in alto a destra). Cliccaci sopra e seleziona **New repository**.
1. **Crea il tuo repository su GitHub**. Vai su GitHub.com e cerca quel pulsante verde brillante **New** (o il segno **+** in alto a destra). Cliccaci sopra e seleziona **New repository**.
Ecco cosa fare:
1. Dai un nome al tuo repository – scegli qualcosa di significativo per te!
1. Dai un nome al tuo repository – scegline uno che abbia significato per te!
1. Aggiungi una descrizione se vuoi (aiuta gli altri a capire di cosa tratta il tuo progetto)
1. Decidi se vuoi che sia pubblico (tutti possono vederlo) o privato (solo per te)
1. Decidi se vuoi che sia pubblico (visibile a tutti) o privato (solo per te)
1. Ti consiglio di selezionare la casella per aggiungere un file README – è come la prima pagina del tuo progetto
1. Clicca su **Create repository** e festeggia – hai appena creato il tuo primo repository! 🎉
2. **Naviga nella tua cartella di progetto**. Ora apriamo il terminale (non preoccuparti, non è così spaventoso come sembra!). Dobbiamo dire al tuo computer dove si trovano i file del tuo progetto. Digita questo comando:
2. **Vai alla tua cartella del progetto**. Ora apriamo il terminale (non preoccuparti, non è così spaventoso come sembra!). Dobbiamo dire al tuo computer dove si trovano i file del tuo progetto. Digita questo comando:
```bash
cd [name of your folder]
```
**Cosa stiamo facendo qui:**
- Stiamo praticamente dicendo "Ehi computer, portami alla mia cartella di progetto"
- È come aprire una cartella specifica sul desktop, ma lo stiamo facendo con comandi testuali
- Sostituisci `[name of your folder]` con il nome effettivo della tua cartella di progetto
- Stiamo praticamente dicendo "Ehi computer, portami alla mia cartella del progetto"
- È come aprire una cartella specifica sul desktop, ma lo facciamo con comandi testuali
- Sostituisci `[name of your folder]` con il nome effettivo della tua cartella del progetto
3. **Trasforma la tua cartella in un repository Git**. Qui avviene la magia! Digita:
@ -192,10 +190,10 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
git init
```
**Ecco cosa è appena successo (cose davvero interessanti!):**
**Ecco cosa è appena successo (cose davvero fighe!):**
- Git ha appena creato una cartella nascosta `.git` nel tuo progetto – non la vedrai, ma è lì!
- La tua cartella normale è ora un "repository" che può tracciare ogni modifica che fai
- Pensalo come dare alla tua cartella superpoteri per ricordare tutto
- Pensalo come dare superpoteri alla tua cartella per ricordare tutto
4. **Controlla cosa sta succedendo**. Vediamo cosa pensa Git del tuo progetto in questo momento:
@ -218,12 +216,12 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
**Non farti prendere dal panico! Ecco cosa significa:**
- I file in **rosso** sono file che hanno modifiche ma non sono ancora pronti per essere salvati
- I file in **verde** (quando li vedi) sono pronti per essere salvati
- Git ti sta aiutando dicendoti esattamente cosa puoi fare dopo
- I file in **verde** (quando li vedrai) sono pronti per essere salvati
- Git è utile e ti dice esattamente cosa puoi fare dopo
> 💡 **Consiglio pro**: Il comando `git status` è il tuo migliore amico! Usalo ogni volta che sei confuso su cosa sta succedendo. È come chiedere a Git "Ehi, qual è la situazione in questo momento?"
5. **Prepara i tuoi file per il salvataggio** (questo si chiama "staging"):
5. **Prepara i tuoi file per essere salvati** (questo si chiama "staging"):
```bash
git add .
@ -232,7 +230,7 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
**Cosa abbiamo appena fatto:**
- Abbiamo detto a Git "Ehi, voglio includere TUTTI i miei file nel prossimo salvataggio"
- Il `.` è come dire "tutto in questa cartella"
- Ora i tuoi file sono "staged" e pronti per il prossimo passaggio
- Ora i tuoi file sono "in stage" e pronti per il prossimo passaggio
**Vuoi essere più selettivo?** Puoi aggiungere solo file specifici:
@ -245,19 +243,19 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
- Ti aiuta a organizzare il tuo lavoro in blocchi logici
- Rende più facile capire cosa è cambiato e quando
**Hai cambiato idea?** Nessun problema! Puoi rimuovere i file dallo staging in questo modo:
**Hai cambiato idea?** Nessun problema! Puoi rimuovere i file dallo stage così:
```bash
# Unstage everything
# Rimuovi tutto dalla fase di staging
git reset
# Unstage just one file
# Rimuovi dalla fase di staging solo un file
git reset [file name]
```
Non preoccuparti – questo non elimina il tuo lavoro, semplicemente toglie i file dalla "pila pronta per il salvataggio".
6. **Salva il tuo lavoro in modo permanente** (fai il tuo primo commit!):
6. **Salva il tuo lavoro in modo permanente** (facendo il tuo primo commit!):
```bash
git commit -m "first commit"
@ -266,52 +264,52 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
**🎉 Congratulazioni! Hai appena fatto il tuo primo commit!**
**Ecco cosa è appena successo:**
- Git ha fatto una "istantanea" di tutti i file staged in questo momento preciso
- Git ha scattato una "istantanea" di tutti i file in stage in questo momento esatto
- Il tuo messaggio di commit "first commit" spiega di cosa tratta questo punto di salvataggio
- Git ha dato a questa istantanea un ID unico, così puoi sempre trovarla in seguito
- Hai ufficialmente iniziato a tracciare la storia del tuo progetto!
- Git ha assegnato a questa istantanea un ID unico, così puoi sempre trovarla in seguito
- Hai ufficialmente iniziato a tracciare la cronologia del tuo progetto!
> 💡 **Messaggi di commit futuri**: Per i tuoi prossimi commit, sii più descrittivo! Invece di "updated stuff", prova "Aggiunto modulo di contatto alla homepage" o "Risolto bug nel menu di navigazione". Il tuo futuro io ti ringrazierà!
> 💡 **Messaggi di commit futuri**: Per i tuoi prossimi commit, sii più descrittivo! Invece di "aggiornato roba", prova "Aggiunto modulo di contatto alla homepage" o "Risolto bug nel menu di navigazione". Il tuo futuro io ti ringrazierà!
7. **Collega il tuo progetto locale a GitHub**. Al momento, il tuo progetto esiste solo sul tuo computer. Colleghiamolo al tuo repository GitHub così puoi condividerlo con il mondo!
Per prima cosa, vai alla pagina del tuo repository GitHub e copia l'URL. Poi torna qui e digita:
Prima, vai alla pagina del tuo repository GitHub e copia l'URL. Poi torna qui e digita:
(Sostituisci quell'URL con l'URL effettivo del tuo repository!)
**Cosa abbiamo appena fatto:**
- Abbiamo creato una connessione tra il tuo progetto locale e il tuo repository GitHub.
- "Origin" è solo un soprannome per il tuo repository GitHub – è come aggiungere un contatto al tuo telefono.
- Ora il tuo Git locale sa dove inviare il tuo codice quando sei pronto a condividerlo.
💡 **Modo più semplice**: Se hai installato GitHub CLI, puoi fare tutto questo con un solo comando:
**Cosa abbiamo appena fatto:**
- Abbiamo creato una connessione tra il tuo progetto locale e il tuo repository GitHub
- "Origin" è solo un soprannome per il tuo repository GitHub – è come aggiungere un contatto al tuo telefono
- Ora il tuo Git locale sa dove inviare il tuo codice quando sei pronto a condividerlo
💡 **Metodo più semplice**: Se hai installato GitHub CLI, puoi fare tutto questo con un solo comando:
```bash
gh repo create my-repo --public --push --source=.
```
8. **Invia il tuo codice su GitHub** (il grande momento!):
```bash
git push -u origin main
```
**🚀 Ecco fatto! Stai caricando il tuo codice su GitHub!**
**Cosa sta succedendo:**
- I tuoi commit stanno viaggiando dal tuo computer a GitHub.
- Il flag `-u` imposta una connessione permanente, rendendo più semplici i futuri push.
- "main" è il nome del tuo branch principale (come la cartella principale).
- Dopo questo, per i futuri upload ti basterà digitare `git push`!
**🚀 Ecco fatto! Stai caricando il tuo codice su GitHub!**
**Cosa sta succedendo:**
- I tuoi commit stanno viaggiando dal tuo computer a GitHub
- Il flag `-u` stabilisce una connessione permanente, rendendo più facili i futuri push
- "main" è il nome del tuo branch principale (come la cartella principale)
- Dopo questo, per i futuri upload ti basterà digitare `git push`!
💡 **Nota veloce**: Se il tuo branch si chiama in un altro modo (come "master"), usa quel nome. Puoi verificarlo con `git branch --show-current`.
💡 **Nota veloce**: Se il tuo branch si chiama diversamente (come "master"), usa quel nome. Puoi verificarlo con `git branch --show-current`.
9. **Il tuo nuovo ritmo quotidiano di coding** (qui diventa una routine!):
9. **Il tuo nuovo ritmo quotidiano di coding** (qui diventa coinvolgente!):
Da ora in poi, ogni volta che apporti modifiche al tuo progetto, segui questa semplice sequenza di tre passaggi:
Da ora in poi, ogni volta che apporti modifiche al tuo progetto, segui questa semplice routine in tre passaggi:
```bash
git add .
@ -319,18 +317,18 @@ Da ora in poi, ogni volta che apporti modifiche al tuo progetto, segui questa se
git push
```
**Questo diventa il tuo ritmo di coding:**
- Fai delle modifiche fantastiche al tuo codice ✨
- Metti in stage con `git add` ("Ehi Git, presta attenzione a queste modifiche!")
- Salvale con `git commit` e un messaggio descrittivo (il te del futuro ti ringrazierà!)
- Condividile con il mondo usando `git push` 🚀
- Ripeti – seriamente, diventa naturale come respirare!
**Questo diventa il tuo battito cardiaco da programmatore:**
- Apporta modifiche straordinarie al tuo codice ✨
- Metti in stage con `git add` ("Ehi Git, presta attenzione a queste modifiche!")
- Salva con `git commit` e un messaggio descrittivo (il te del futuro ti ringrazierà!)
- Condividi con il mondo usando `git push` 🚀
- Ripeti – davvero, diventa naturale come respirare!
Adoro questo workflow perché è come avere più punti di salvataggio in un videogioco. Hai fatto una modifica che ti piace? Commit! Vuoi provare qualcosa di rischioso? Nessun problema – puoi sempre tornare al tuo ultimo commit se qualcosa va storto!
Amo questo workflow perché è come avere più punti di salvataggio in un videogioco. Hai fatto una modifica che ti piace? Commit! Vuoi provare qualcosa di rischioso? Nessun problema – puoi sempre tornare al tuo ultimo commit se le cose vanno male!
> 💡 **Consiglio**: Potresti anche voler adottare un file `.gitignore` per evitare che file che non vuoi tracciare finiscano su GitHub - come quel file di appunti che conservi nella stessa cartella ma che non ha posto in un repository pubblico. Puoi trovare modelli per file `.gitignore` su [.gitignore templates](https://github.com/github/gitignore) o crearne uno usando [gitignore.io](https://www.toptal.com/developers/gitignore).
> 💡 **Consiglio**: Potresti anche voler adottare un file `.gitignore` per evitare che file che non vuoi tracciare compaiano su GitHub - come quel file di appunti che conservi nella stessa cartella ma che non ha posto in un repository pubblico. Puoi trovare modelli per file `.gitignore` su [.gitignore templates](https://github.com/github/gitignore) o crearne uno usando [gitignore.io](https://www.toptal.com/developers/gitignore).
### 🧠 **Primo check-in del repository: come ti sei sentito?**
### 🧠 **Primo check-in del repository: Come ti sei sentito?**
**Prenditi un momento per festeggiare e riflettere:**
- Come ti sei sentito nel vedere il tuo codice apparire su GitHub per la prima volta?
@ -339,37 +337,37 @@ Adoro questo workflow perché è come avere più punti di salvataggio in un vide
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Crea progetto
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! 🎉
GitHub --> [*]: Successo! 🎉
note right of Staged
Files ready to save
File pronti per essere salvati
end note
note right of Committed
Snapshot created
Snapshot creato
end note
```
> **Ricorda**: Anche gli sviluppatori esperti a volte dimenticano i comandi esatti. Far diventare questo workflow un'abitudine richiede pratica - stai andando alla grande!
> **Ricorda**: Anche gli sviluppatori esperti a volte dimenticano i comandi esatti. Far diventare questo workflow un'abitudine richiede pratica – stai andando alla grande!
#### Workflow moderni con Git
#### Workflow Git moderni
Considera di adottare queste pratiche moderne:
- **Conventional Commits**: Usa un formato standardizzato per i messaggi di commit come `feat:`, `fix:`, `docs:`, ecc. Scopri di più su [conventionalcommits.org](https://www.conventionalcommits.org/).
- **Commit atomici**: Fai in modo che ogni commit rappresenti una singola modifica logica.
- **Commit frequenti**: Fai commit frequenti con messaggi descrittivi piuttosto che commit grandi e poco frequenti.
- **Conventional Commits**: Usa un formato standardizzato per i messaggi di commit come `feat:`, `fix:`, `docs:`, ecc. Scopri di più su [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Commit atomici**: Fai in modo che ogni commit rappresenti un singolo cambiamento logico
- **Commit frequenti**: Effettua commit frequenti con messaggi descrittivi piuttosto che commit grandi e poco frequenti
#### Messaggi di commit
Una grande riga di soggetto per un commit di Git completa la seguente frase:
Se applicato, questo commit <latuarigadisoggettoqui>.
Una grande riga di soggetto per un commit Git completa la seguente frase:
Se applicato, questo commit <latuarigadisoggettoqui>
Per il soggetto usa il tempo presente imperativo: "modifica" e non "modificato" né "modifiche". Come nel soggetto, anche nel corpo (opzionale) usa il tempo presente imperativo. Il corpo dovrebbe includere la motivazione del cambiamento e confrontarla con il comportamento precedente. Stai spiegando il `perché`, non il `come`.
Per il soggetto usa l'imperativo, tempo presente: "modifica" non "modificato" né "modifiche".
Come nel soggetto, anche nel corpo (opzionale) usa l'imperativo, tempo presente. Il corpo dovrebbe includere la motivazione del cambiamento e confrontarla con il comportamento precedente. Stai spiegando il `perché`, non il `come`.
✅ Prenditi qualche minuto per navigare su GitHub. Riesci a trovare un messaggio di commit davvero ben fatto? Riesci a trovarne uno molto minimale? Quali informazioni pensi siano le più importanti e utili da trasmettere in un messaggio di commit?
@ -377,41 +375,40 @@ Per il soggetto usa il tempo presente imperativo: "modifica" e non "modificato"
Preparati perché QUI è dove GitHub diventa assolutamente magico! 🪄 Hai imparato a gestire il tuo codice, ma ora stiamo entrando nella mia parte preferita – collaborare con persone straordinarie da tutto il mondo.
Immagina questo: ti svegli domani e scopri che qualcuno a Tokyo ha migliorato il tuo codice mentre dormivi. Poi qualcuno a Berlino risolve un bug su cui eri bloccato. Nel pomeriggio, uno sviluppatore a São Paulo ha aggiunto una funzionalità a cui non avevi nemmeno pensato. Non è fantascienza – è solo un normale martedì nell'universo di GitHub!
Immagina questo: ti svegli domani e scopri che qualcuno a Tokyo ha migliorato il tuo codice mentre dormivi. Poi qualcuno a Berlino risolve un bug su cui eri bloccato. Nel pomeriggio, uno sviluppatore a São Paulo aggiunge una funzionalità a cui non avevi nemmeno pensato. Non è fantascienza – è solo un normale martedì nell'universo di GitHub!
Quello che mi entusiasma davvero è che le competenze di collaborazione che stai per imparare? Sono ESATTAMENTE gli stessi workflow che i team di Google, Microsoft e delle tue startup preferite usano ogni singolo giorno. Non stai solo imparando uno strumento interessante – stai imparando il linguaggio segreto che fa funzionare insieme l'intero mondo del software.
Quello che mi entusiasma davvero è che le competenze di collaborazione che stai per imparare? Sono gli STESSI workflow che i team di Google, Microsoft e le tue startup preferite usano ogni singolo giorno. Non stai solo imparando uno strumento interessante – stai imparando il linguaggio segreto che fa funzionare insieme l'intero mondo del software.
Seriamente, una volta che provi l'emozione di vedere qualcuno unire la tua prima pull request, capirai perché gli sviluppatori si appassionano così tanto all'open source. È come far parte del più grande e creativo progetto di squadra del mondo!
> Guarda il video
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
Il motivo principale per mettere le cose su GitHub era rendere possibile collaborare con altri sviluppatori.
```mermaid
flowchart LR
A[🔍 Find Project] --> B[🍴 Fork Repository]
B --> C[📥 Clone to Local]
C --> D[🌿 Create Branch]
D --> E[✏️ Make Changes]
E --> F[💾 Commit Changes]
A[🔍 Trova Progetto] --> B[🍴 Fork Repository]
B --> C[📥 Clona in Locale]
C --> D[🌿 Crea Branch]
D --> E[✏️ Apporta Modifiche]
E --> F[💾 Commit Modifiche]
F --> G[📤 Push Branch]
G --> H[🔄 Create Pull Request]
H --> I{Maintainer Review}
I -->|✅ Approved| J[🎉 Merge!]
I -->|❓ Changes Requested| K[📝 Make Updates]
G --> H[🔄 Crea Pull Request]
H --> I{Revisione del Maintainer}
I -->|✅ Approvato| J[🎉 Merge!]
I -->|❓ Modifiche Richieste| K[📝 Apporta Aggiornamenti]
K --> F
J --> L[🧹 Clean Up Branches]
J --> L[🧹 Pulisci Branch]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
Nel tuo repository, vai su `Insights > Community` per vedere come il tuo progetto si confronta con gli standard di comunità raccomandati.
Nel tuo repository, vai su `Insights > Community` per vedere come il tuo progetto si confronta con gli standard della comunità raccomandati.
Vuoi far sembrare il tuo repository professionale e accogliente? Vai al tuo repository e clicca su `Insights > Community`. Questa funzione interessante ti mostra come il tuo progetto si confronta con ciò che la comunità GitHub considera "buone pratiche per i repository".
Vuoi rendere il tuo repository professionale e accogliente? Vai al tuo repository e clicca su `Insights > Community`. Questa funzione interessante ti mostra come il tuo progetto si confronta con ciò che la comunità GitHub considera "buone pratiche per i repository".
> 🎯 **Fai brillare il tuo progetto**: Un repository ben organizzato con una buona documentazione è come avere una vetrina pulita e accogliente. Dice alle persone che tieni al tuo lavoro e le invoglia a contribuire!
@ -419,10 +416,10 @@ Vuoi far sembrare il tuo repository professionale e accogliente? Vai al tuo repo
| Cosa aggiungere | Perché è importante | Cosa fa per te |
| **Descrizione** | La prima impressione conta! | Le persone capiscono subito di cosa tratta il tuo progetto |
| **README** | La pagina principale del tuo progetto | Come una guida amichevole per i nuovi visitatori |
| **Linee guida per i contributi** | Mostra che accetti aiuto | Le persone sanno esattamente come possono aiutarti |
| **Codice di condotta** | Crea un ambiente amichevole | Tutti si sentono benvenuti a partecipare |
| **Descrizione** | La prima impressione conta! | Le persone capiscono subito cosa fa il tuo progetto |
| **README** | La pagina principale del tuo progetto | Come una guida turistica amichevole per i nuovi visitatori |
| **Linee guida per contribuire** | Mostra che accetti aiuto | Le persone sanno esattamente come possono aiutarti |
| **Codice di condotta** | Crea uno spazio amichevole | Tutti si sentono benvenuti a partecipare |
| **Licenza** | Chiarezza legale | Gli altri sanno come possono usare il tuo codice |
| **Politica di sicurezza** | Mostra che sei responsabile | Dimostra pratiche professionali |
@ -431,13 +428,13 @@ Vuoi far sembrare il tuo repository professionale e accogliente? Vai al tuo repo
**Funzionalità moderne di GitHub da esplorare:**
🤖 **Automazione & CI/CD:**
- **GitHub Actions** per test e distribuzione automatizzati.
- **Dependabot** per aggiornamenti automatici delle dipendenze.
- **GitHub Actions** per test e deployment automatici
- **Dependabot** per aggiornamenti automatici delle dipendenze
💬 **Comunità & Gestione dei progetti:**
- **GitHub Discussions** per conversazioni comunitarie oltre ai problemi.
- **GitHub Projects** per la gestione dei progetti in stile kanban.
- **Regole di protezione dei branch** per garantire standard di qualità del codice.
💬 **Comunità & Gestione Progetti:**
- **GitHub Discussions** per conversazioni comunitarie oltre ai problemi
- **GitHub Projects** per gestione di progetti in stile kanban
- **Regole di protezione dei branch** per garantire standard di qualità del codice
Tutte queste risorse saranno utili per integrare nuovi membri del team. E sono tipicamente le cose che i nuovi collaboratori guardano prima ancora di esaminare il tuo codice, per capire se il tuo progetto è il posto giusto dove investire il loro tempo.
@ -445,20 +442,20 @@ Tutte queste risorse saranno utili per integrare nuovi membri del team. E sono t
### Compito: Unire del codice
I documenti di contributo aiutano le persone a contribuire al progetto. Spiegano quali tipi di contributi stai cercando e come funziona il processo. I collaboratori dovranno seguire una serie di passaggi per poter contribuire al tuo repository su GitHub:
I documenti per contribuire aiutano le persone a contribuire al progetto. Spiegano quali tipi di contributi stai cercando e come funziona il processo. I collaboratori dovranno seguire una serie di passaggi per poter contribuire al tuo repository su GitHub:
1. **Fare un fork del tuo repository**. Probabilmente vorrai che le persone _facciano un fork_ del tuo progetto. Fare un fork significa creare una replica del tuo repository sul loro profilo GitHub.
1. **Clonare**. Da lì, cloneranno il progetto sulla loro macchina locale.
1. **Creare un branch**. Vorrai chiedere loro di creare un _branch_ per il loro lavoro.
1. **Concentrarsi su un'area specifica**. Chiedi ai collaboratori di concentrarsi su un'area alla volta – in questo modo aumentano le possibilità che tu possa _unire_ il loro lavoro. Immagina che scrivano una correzione di bug, aggiungano una nuova funzionalità e aggiornino diversi test – cosa succede se vuoi, o puoi implementare solo 2 su 3, o 1 su 3 modifiche?
1. **Fork del tuo repository** Probabilmente vorrai che le persone _forkino_ il tuo progetto. Forkare significa creare una replica del tuo repository sul loro profilo GitHub.
1. **Clone**. Da lì cloneranno il progetto sulla loro macchina locale.
1. **Creare un branch**. Vorrai chiedere loro di creare un _branch_ per il loro lavoro.
1. **Concentrarsi su un'area**. Chiedi ai collaboratori di concentrarsi su un contributo alla volta - in questo modo le probabilità che tu possa _unire_ il loro lavoro sono più alte. Immagina che scrivano una correzione di bug, aggiungano una nuova funzionalità e aggiornino diversi test - cosa succede se vuoi, o puoi implementare solo 2 su 3, o 1 su 3 modifiche?
✅ Immagina una situazione in cui i branch sono particolarmente critici per scrivere e distribuire buon codice. Quali casi d'uso ti vengono in mente?
> Nota, sii il cambiamento che vuoi vedere nel mondo e crea branch anche per il tuo lavoro. Qualsiasi commit che fai sarà fatto sul branch su cui sei attualmente "posizionato". Usa `git status` per vedere quale branch è attivo.
> Nota, sii il cambiamento che vuoi vedere nel mondo e crea branch anche per il tuo lavoro. Qualsiasi commit che fai sarà fatto sul branch su cui sei attualmente "checkout". Usa `git status` per vedere quale branch è.
Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collaboratore abbia già fatto il _fork_ e il _clone_ del repository, quindi ha un repository Git pronto per essere utilizzato sulla sua macchina locale:
Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collaboratore abbia già _forkato_ e _clonato_ il repository, quindi ha un repository Git pronto per essere lavorato sulla sua macchina locale:
1. **Creare un branch**. Usa il comando `git branch` per creare un branch che conterrà le modifiche che intende contribuire:
1. **Creare un branch**. Usa il comando `git branch` per creare un branch che conterrà le modifiche che intendono contribuire:
```bash
git branch [branch-name]
@ -469,7 +466,6 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
git switch -c [branch-name]
```
1. **Passare al branch di lavoro**. Passa al branch specificato e aggiorna la directory di lavoro con `git switch`:
```bash
@ -478,7 +474,7 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
> 💡 **Nota moderna**: `git switch` è il sostituto moderno di `git checkout` per cambiare branch. È più chiaro e sicuro per i principianti.
1. **Lavorare**. A questo punto vuoi aggiungere le tue modifiche. Non dimenticare di comunicarlo a Git con i seguenti comandi:
1. **Fare il lavoro**. A questo punto vuoi aggiungere le tue modifiche. Non dimenticare di dirlo a Git con i seguenti comandi:
```bash
git add .
@ -494,20 +490,19 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
git pull
```
A questo punto vuoi assicurarti che eventuali _conflitti_, situazioni in cui Git non riesce facilmente a _unire_ le modifiche, si verifichino nel tuo branch di lavoro. Pertanto, esegui i seguenti comandi:
A questo punto vuoi assicurarti che eventuali _conflitti_, situazioni in cui Git non riesce facilmente a _unire_ le modifiche, si verifichino nel tuo branch di lavoro. Pertanto esegui i seguenti comandi:
```bash
git switch [branch_name]
git merge main
```
Il comando `git merge main` porterà tutte le modifiche da `main` nel tuo branch. Speriamo che tu possa continuare senza problemi. In caso contrario, VS Code ti dirà dove Git è _confuso_ e tu modificherai i file interessati per indicare quale contenuto è più accurato.
Il comando `git merge main` porterà tutte le modifiche da `main` nel tuo branch. Si spera che tu possa semplicemente continuare. Se no, VS Code ti dirà dove Git è _confuso_ e tu modifichi i file interessati per indicare quale contenuto è più accurato.
💡 **Alternativa moderna**: Considera di usare `git rebase` per una cronologia più pulita:
```bash
git rebase main
```
Questo riproduce i tuoi commit sopra l'ultimo branch main, creando una cronologia lineare.
1. **Invia il tuo lavoro su GitHub**. Inviare il tuo lavoro su GitHub significa due cose. Fare il push del tuo branch sul tuo repository e poi aprire una PR, Pull Request.
@ -521,43 +516,42 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
### 🤝 **Verifica delle competenze di collaborazione: Pronto a lavorare con gli altri?**
**Vediamo come ti senti riguardo alla collaborazione:**
- L'idea di fare fork e pull request ti è chiara ora?
- L'idea di fork e pull request ti è chiara ora?
- Qual è una cosa sul lavoro con i branch che vuoi praticare di più?
- Quanto ti senti a tuo agio nel contribuire al progetto di qualcun altro?
```mermaid
mindmap
root((Git Collaboration))
root((Collaborazione Git))
Branching
Feature branches
Bug fix branches
Experimental work
Rami delle funzionalità
Rami di correzione bug
Lavoro sperimentale
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
Revisione del codice
Discussione
Test
Migliori Pratiche
Messaggi di commit chiari
Modifiche piccole e mirate
Buona documentazione
```
> **Incoraggiamento**: Ogni singolo sviluppatore che ammiri era una volta nervoso per la sua prima pull request. La comunità GitHub è incredibilmente accogliente per i nuovi arrivati!
> **Iniezione di fiducia**: Ogni singolo sviluppatore che ammiri era una volta nervoso per la sua prima pull request. La comunità di GitHub è incredibilmente accogliente per i nuovi arrivati!
1. **Apri una PR**. Successivamente, vuoi aprire una PR. Lo fai navigando nel repository forkato su GitHub. Vedrai un'indicazione su GitHub che ti chiede se vuoi creare una nuova PR, clicca su quella e verrai portato a un'interfaccia dove puoi modificare il titolo del messaggio di commit, fornire una descrizione più adatta. Ora il manutentore del repository che hai forkato vedrà questa PR e _incrociamo le dita_ apprezzerà e _unirà_ la tua PR. Ora sei un collaboratore, evviva :)
1. **Apri una PR**. Successivamente, vuoi aprire una PR. Lo fai navigando nel repository forkato su GitHub. Vedrai un'indicazione su GitHub dove ti chiede se vuoi creare una nuova PR, clicchi lì e vieni portato a un'interfaccia dove puoi modificare il titolo del messaggio di commit, dare una descrizione più adatta. Ora il manutentore del repository che hai forkato vedrà questa PR e _incrociamo le dita_ apprezzerà e _unirà_ la tua PR. Ora sei un collaboratore, evviva :)
💡 **Consiglio moderno**: Puoi anche creare PR usando GitHub CLI:
- Collega problemi correlati usando parole chiave come "Fixes #123".
- Aggiungi screenshot per modifiche all'interfaccia utente.
- Richiedi revisori specifici.
- Usa PR in bozza per lavori in corso.
- Assicurati che tutti i controlli CI siano superati prima di richiedere una revisione.
1. **Pulizia**. È considerata una buona pratica _pulire_ dopo aver completato con successo il merge di una PR. Vuoi pulire sia il tuo branch locale che il branch che hai caricato su GitHub. Per prima cosa, eliminiamolo localmente con il seguente comando:
🔧 **Best practices per le PR**:
- Collega problemi correlati usando parole chiave come "Fixes #123"
- Aggiungi screenshot per modifiche all'interfaccia utente
- Richiedi revisori specifici
- Usa PR in bozza per lavori in corso
- Assicurati che tutti i controlli CI siano superati prima di richiedere la revisione
1. **Pulizia**. È considerata una buona pratica _fare pulizia_ dopo aver unito con successo una PR. Vuoi ripulire sia il tuo branch locale che il branch che hai caricato su GitHub. Per prima cosa, eliminiamolo localmente con il seguente comando:
```bash
git branch -d [branch-name]
@ -565,9 +559,9 @@ mindmap
Assicurati di andare sulla pagina GitHub del repository forkato e rimuovere il branch remoto che hai appena caricato.
`Pull request` sembra un termine strano perché in realtà vuoi spingere le tue modifiche al progetto. Ma il maintainer (proprietario del progetto) o il team principale deve valutare le tue modifiche prima di unirle al branch "main" del progetto, quindi stai davvero richiedendo una decisione di modifica da parte di un maintainer.
`Pull request` sembra un termine strano perché in realtà vuoi spingere le tue modifiche nel progetto. Ma il maintainer (proprietario del progetto) o il team principale deve valutare le tue modifiche prima di unirle al branch "main" del progetto, quindi stai davvero richiedendo una decisione di modifica da parte di un maintainer.
Una pull request è il luogo in cui confrontare e discutere le differenze introdotte in un branch con revisioni, commenti, test integrati e altro. Una buona pull request segue più o meno le stesse regole di un messaggio di commit. Puoi aggiungere un riferimento a un problema nel tracker dei problemi, ad esempio quando il tuo lavoro risolve un problema. Questo si fa usando un `#` seguito dal numero del problema. Ad esempio `#97`.
Una pull request è il luogo in cui confrontare e discutere le differenze introdotte in un branch con revisioni, commenti, test integrati e altro. Una buona pull request segue più o meno le stesse regole di un messaggio di commit. Puoi aggiungere un riferimento a un problema nel tracker delle issue, ad esempio quando il tuo lavoro risolve un problema. Questo si fa usando un `#` seguito dal numero del problema. Ad esempio `#97`.
🤞Incrociamo le dita che tutti i controlli passino e che il proprietario del progetto unisca le tue modifiche al progetto🤞
@ -577,34 +571,33 @@ Aggiorna il tuo branch di lavoro locale corrente con tutti i nuovi commit dal br
## Contribuire all'Open Source (La tua occasione per fare la differenza!)
Sei pronto per qualcosa che ti lascerà a bocca aperta? 🤯 Parliamo di contribuire ai progetti open source – e mi vengono i brividi solo pensando di condividere questo con te!
Sei pronto per qualcosa che ti lascerà a bocca aperta? 🤯 Parliamo di contribuire ai progetti open source – e mi vengono i brividi solo a pensare di condividere questo con te!
Questa è la tua occasione per far parte di qualcosa di veramente straordinario. Immagina di migliorare gli strumenti che milioni di sviluppatori usano ogni giorno, o di correggere un bug in un'app che i tuoi amici adorano. Non è solo un sogno – è proprio ciò che significa contribuire all'open source!
Questa è la tua occasione per far parte di qualcosa di veramente straordinario. Immagina di migliorare gli strumenti che milioni di sviluppatori usano ogni giorno o di correggere un bug in un'app che i tuoi amici adorano. Non è solo un sogno – è proprio questo che significa contribuire all'open source!
Ecco cosa mi emoziona ogni volta che ci penso: ogni singolo strumento con cui hai imparato – il tuo editor di codice, i framework che esploreremo, persino il browser che stai usando per leggere questo – è iniziato con qualcuno esattamente come te che ha fatto il suo primo contributo. Quel brillante sviluppatore che ha creato la tua estensione preferita per VS Code? Una volta era un principiante che cliccava su "create pull request" con le mani tremanti, proprio come stai per fare tu.
Ecco cosa mi emoziona ogni volta che ci penso: ogni singolo strumento con cui hai imparato – il tuo editor di codice, i framework che esploreremo, persino il browser che stai usando per leggere questo – è iniziato con qualcuno esattamente come te che ha fatto il suo primo contributo. Quello sviluppatore brillante che ha creato la tua estensione preferita per VS Code? Una volta era un principiante che cliccava su "crea pull request" con le mani tremanti, proprio come stai per fare tu.
E la parte più bella è questa: la comunità open source è come il più grande abbraccio di gruppo su internet. La maggior parte dei progetti cerca attivamente nuovi arrivati e ha problemi etichettati "good first issue" appositamente per persone come te! I maintainer si entusiasmano davvero quando vedono nuovi contributori perché ricordano i loro primi passi.
E la parte più bella è questa: la comunità open source è come il più grande abbraccio collettivo di internet. La maggior parte dei progetti cerca attivamente nuovi arrivati e ha issue etichettate "good first issue" appositamente per persone come te! I maintainer si entusiasmano davvero quando vedono nuovi contributori perché ricordano i loro primi passi.
```mermaid
flowchart TD
A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
B --> C[📖 Read Contributing Guidelines]
C --> D[🍴 Fork Repository]
D --> E[💻 Set Up Local Environment]
E --> F[🌿 Create Feature Branch]
F --> G[✨ Make Your Contribution]
G --> H[🧪 Test Your Changes]
H --> I[📝 Write Clear Commit]
I --> J[📤 Push & Create PR]
J --> K[💬 Engage with Feedback]
K --> L[🎉 Merged! You're a Contributor!]
L --> M[🌟 Find Next Issue]
A[🔍 Esplora GitHub] --> B[🏷️ Trova "good first issue"]
B --> C[📖 Leggi Linee Guida per Contribuire]
C --> D[🍴 Fai il Fork del Repository]
D --> E[💻 Configura Ambiente Locale]
E --> F[🌿 Crea Branch per la Funzionalità]
F --> G[✨ Fai il Tuo Contributo]
G --> H[🧪 Testa le Tue Modifiche]
H --> I[📝 Scrivi un Commit Chiaro]
I --> J[📤 Fai Push & Crea PR]
J --> K[💬 Interagisci con il Feedback]
K --> L[🎉 Unito! Sei un Contributore!]
L --> M[🌟 Trova il Prossimo Problema]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Non stai solo imparando a programmare qui – ti stai preparando a unirti a una famiglia globale di costruttori che si svegliano ogni giorno pensando "Come possiamo rendere il mondo digitale un po' migliore?" Benvenuto nel club! 🌟
Per prima cosa, troviamo un repository (o **repo**) su GitHub che ti interessa e a cui vorresti contribuire con una modifica. Vorrai copiarne i contenuti sul tuo computer.
@ -613,26 +606,26 @@ Per prima cosa, troviamo un repository (o **repo**) su GitHub che ti interessa e
Ci sono diversi modi per copiare il codice. Un modo è "clonare" i contenuti del repository, usando HTTPS, SSH o il GitHub CLI (Command Line Interface).
Ci sono diversi modi per copiare il codice. Uno di questi è "clonare" i contenuti del repository, utilizzando HTTPS, SSH o il GitHub CLI (Command Line Interface).
Apri il tuo terminale e clona il repository in questo modo:
Apri il terminale e clona il repository in questo modo:
```bash
# Using HTTPS
# Utilizzando HTTPS
git clone https://github.com/ProjectURL
# Using SSH (requires SSH key setup)
# Utilizzando SSH (richiede la configurazione della chiave SSH)
git clone git@github.com:username/repository.git
# Using GitHub CLI
# Utilizzando GitHub CLI
gh repo clone username/repository
```
Per lavorare sul progetto, passa alla cartella corretta:
Per lavorare sul progetto, spostati nella cartella corretta:
`cd ProjectURL`
Puoi anche aprire l'intero progetto usando:
Puoi anche aprire l'intero progetto utilizzando:
- **[GitHub Codespaces](https://github.com/features/codespaces)** - L'ambiente di sviluppo cloud di GitHub con VS Code nel browser
- **[GitHub Desktop](https://desktop.github.com/)** - Un'applicazione GUI per operazioni Git
- **[GitHub Desktop](https://desktop.github.com/)** - Un'applicazione GUI per le operazioni Git
- **[GitHub.dev](https://github.dev)** - Premi il tasto `.` su qualsiasi repo GitHub per aprire VS Code nel browser
- **VS Code** con l'estensione GitHub Pull Requests
@ -640,49 +633,49 @@ Infine, puoi scaricare il codice in una cartella compressa.
### Alcune cose interessanti su GitHub
Puoi mettere una stella, seguire e/o "forkare" qualsiasi repository pubblico su GitHub. Puoi trovare i tuoi repository con stella nel menu a tendina in alto a destra. È come salvare nei preferiti, ma per il codice.
Puoi mettere una stella, seguire e/o "forkare" qualsiasi repository pubblico su GitHub. Puoi trovare i tuoi repository con stella nel menu a tendina in alto a destra. È come aggiungere ai segnalibri, ma per il codice.
I progetti hanno un tracker dei problemi, per lo più su GitHub nella scheda "Issues" a meno che non sia indicato diversamente, dove le persone discutono dei problemi relativi al progetto. E la scheda Pull Requests è dove le persone discutono e revisionano le modifiche in corso.
I progetti hanno un tracker delle issue, per lo più su GitHub nella scheda "Issues" a meno che non sia indicato diversamente, dove le persone discutono dei problemi relativi al progetto. E la scheda Pull Requests è dove le persone discutono e revisionano le modifiche in corso.
I progetti potrebbero anche avere discussioni in forum, mailing list o canali di chat come Slack, Discord o IRC.
🔧 **Funzionalità moderne di GitHub**:
- **GitHub Discussions** - Forum integrato per conversazioni della comunità
- **GitHub Sponsors** - Supporta finanziariamente i maintainer
- **Scheda Sicurezza** - Rapporti sulle vulnerabilità e avvisi di sicurezza
- **Scheda Azioni** - Vedi flussi di lavoro automatizzati e pipeline CI/CD
- **Scheda Insights** - Analisi sui contributori, commit e salute del progetto
- **Scheda Progetti** - Strumenti di gestione dei progetti integrati di GitHub
- **Scheda Security** - Rapporti sulle vulnerabilità e avvisi di sicurezza
- **Scheda Actions** - Visualizza i flussi di lavoro automatizzati e le pipeline CI/CD
- **Scheda Insights** - Analisi su contributori, commit e salute del progetto
- **Scheda Projects** - Strumenti di gestione dei progetti integrati di GitHub
✅ Dai un'occhiata al tuo nuovo repository GitHub e prova alcune cose, come modificare le impostazioni, aggiungere informazioni al tuo repo, creare un progetto (come una bacheca Kanban) e configurare GitHub Actions per l'automazione. C'è molto che puoi fare!
✅ Esplora il tuo nuovo repository GitHub e prova alcune cose, come modificare le impostazioni, aggiungere informazioni al tuo repo, creare un progetto (come una bacheca Kanban) e configurare GitHub Actions per l'automazione. C'è molto da fare!
---
## 🚀 Sfida
Bene, è ora di mettere alla prova i tuoi nuovi superpoteri GitHub! 🚀 Ecco una sfida che farà cliccare tutto nel modo più soddisfacente:
Bene, è ora di mettere alla prova i tuoi nuovi superpoteri GitHub! 🚀 Ecco una sfida che renderà tutto più chiaro nel modo più soddisfacente:
Trova un amico (o quel familiare che ti chiede sempre cosa stai facendo con tutta questa "roba da computer") e intraprendi insieme un'avventura di programmazione collaborativa! Qui è dove accade la vera magia – crea un progetto, lascia che lo forkino, crea alcuni branch e unisci le modifiche come i professionisti che stai diventando.
Coinvolgi un amico (o quel familiare che ti chiede sempre cosa stai facendo con tutto questo "roba da computer") e intraprendi insieme un'avventura di codifica collaborativa! Qui è dove accade la vera magia – crea un progetto, faglielo forkare, crea dei branch e unisci le modifiche come i professionisti che stai diventando.
Non ti mentirò – probabilmente riderai a un certo punto (soprattutto quando entrambi cercherete di modificare la stessa riga), magari vi gratterete la testa per la confusione, ma sicuramente avrete quei momenti "aha!" incredibili che rendono tutto l'apprendimento degno di essere vissuto. Inoltre, c'è qualcosa di speciale nel condividere quel primo merge riuscito con qualcun altro – è come una piccola celebrazione di quanto sei arrivato lontano!
Non ti mentirò – probabilmente riderai a un certo punto (soprattutto quando entrambi proverete a modificare la stessa riga), forse vi gratterete la testa per la confusione, ma avrete sicuramente quei momenti "aha!" incredibili che rendono tutto l'apprendimento degno di essere vissuto. Inoltre, c'è qualcosa di speciale nel condividere quella prima unione riuscita con qualcun altro – è come una piccola celebrazione di quanto sei arrivato lontano!
Non hai ancora un amico programmatore? Nessun problema! La comunità GitHub è piena di persone incredibilmente accoglienti che ricordano com'era essere nuovi. Cerca repository con etichette "good first issue" – stanno praticamente dicendo "Ehi principianti, venite a imparare con noi!" Non è fantastico?
Non hai ancora un compagno di codifica? Nessun problema! La comunità GitHub è piena di persone incredibilmente accoglienti che ricordano com'era essere nuovi. Cerca repository con etichette "good first issue" – stanno praticamente dicendo "Ehi principianti, venite a imparare con noi!" Non è fantastico?
Uff! 🎉 Guarda te – hai appena conquistato le basi di GitHub come un vero campione! Se la tua mente si sente un po' piena in questo momento, è completamente normale e, onestamente, un buon segno. Hai appena imparato strumenti che mi hanno richiesto settimane per sentirmi a mio agio quando ho iniziato.
Wow! 🎉 Guarda te – hai appena conquistato le basi di GitHub come un vero campione! Se la tua mente si sente un po' piena in questo momento, è del tutto normale e onestamente un buon segno. Hai appena imparato strumenti che mi hanno richiesto settimane per sentirmi a mio agio quando ho iniziato.
Git e GitHub sono incredibilmente potenti (davvero potenti), e ogni sviluppatore che conosco – inclusi quelli che ora sembrano maghi – ha dovuto esercitarsi e inciampare un po' prima che tutto facesse clic. Il fatto che tu abbia completato questa lezione significa che sei già sulla strada per padroneggiare alcuni degli strumenti più importanti nel kit di uno sviluppatore.
Git e GitHub sono incredibilmente potenti (davvero potenti), e ogni sviluppatore che conosco – inclusi quelli che ora sembrano maghi – ha dovuto esercitarsi e inciampare un po' prima che tutto facesse clic. Il fatto che tu abbia completato questa lezione significa che sei già sulla buona strada per padroneggiare alcuni degli strumenti più importanti nel kit di uno sviluppatore.
Ecco alcune risorse assolutamente fantastiche per aiutarti a esercitarti e diventare ancora più bravo:
Ecco alcune risorse assolutamente fantastiche per aiutarti a esercitarti e diventare ancora più straordinario:
- [Guida al contributo al software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – La tua mappa per fare la differenza
- [Cheatsheet di Git](https://training.github.com/downloads/github-git-cheat-sheet/) – Tienilo a portata di mano per un rapido riferimento!
E ricorda: la pratica porta al progresso, non alla perfezione! Più usi Git e GitHub, più diventa naturale. GitHub ha creato alcuni corsi interattivi straordinari che ti permettono di esercitarti in un ambiente sicuro:
E ricorda: la pratica porta al progresso, non alla perfezione! Più usi Git e GitHub, più diventerà naturale. GitHub ha creato alcuni corsi interattivi straordinari che ti permettono di esercitarti in un ambiente sicuro:
- [Introduzione a GitHub](https://github.com/skills/introduction-to-github)
@ -693,19 +686,19 @@ E ricorda: la pratica porta al progresso, non alla perfezione! Più usi Git e Gi
- [Documentazione GitHub CLI](https://cli.github.com/manual/) – Per quando vuoi sentirti un mago della riga di comando
- [Documentazione GitHub Codespaces](https://docs.github.com/en/codespaces) – Codifica nel cloud!
- [Documentazione GitHub Actions](https://docs.github.com/en/actions) – Automatizza tutto
- [Best practices di Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Migliora il tuo flusso di lavoro
- [Best practice di Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Migliora il tuo flusso di lavoro
## Sfida GitHub Copilot Agent 🚀
Usa la modalità Agent per completare la seguente sfida:
**Descrizione:** Crea un progetto collaborativo di sviluppo web che dimostri il completo flusso di lavoro GitHub che hai imparato in questa lezione. Questa sfida ti aiuterà a esercitarti nella creazione di repository, nelle funzionalità di collaborazione e nei moderni flussi di lavoro Git in uno scenario reale.
**Descrizione:** Crea un progetto di sviluppo web collaborativo che dimostri il flusso di lavoro GitHub completo che hai imparato in questa lezione. Questa sfida ti aiuterà a esercitarti nella creazione di repository, nelle funzionalità di collaborazione e nei flussi di lavoro Git moderni in uno scenario reale.
**Prompt:** Crea un nuovo repository pubblico GitHub per un semplice progetto "Risorse per lo sviluppo web". Il repository dovrebbe includere un file README.md ben strutturato che elenca strumenti e risorse utili per lo sviluppo web, organizzati per categorie (HTML, CSS, JavaScript, ecc.). Configura il repository con standard di comunità adeguati, inclusi una licenza, linee guida per i contributi e un codice di condotta. Crea almeno due branch di funzionalità: uno per aggiungere risorse CSS e un altro per risorse JavaScript. Fai commit su ciascun branch con messaggi di commit descrittivi, quindi crea pull request per unire le modifiche al branch principale. Abilita funzionalità GitHub come Issues, Discussions e configura un flusso di lavoro GitHub Actions di base per controlli automatizzati.
**Prompt:** Crea un nuovo repository pubblico GitHub per un semplice progetto "Risorse per lo sviluppo web". Il repository dovrebbe includere un file README.md ben strutturato che elenchi strumenti e risorse utili per lo sviluppo web, organizzati per categorie (HTML, CSS, JavaScript, ecc.). Configura il repository con standard di comunità adeguati, inclusi una licenza, linee guida per i contributi e un codice di condotta. Crea almeno due branch di funzionalità: uno per aggiungere risorse CSS e un altro per risorse JavaScript. Fai commit su ciascun branch con messaggi di commit descrittivi, quindi crea pull request per unire le modifiche al branch principale. Abilita funzionalità GitHub come Issues, Discussions e configura un flusso di lavoro base di GitHub Actions per controlli automatizzati.
## Compito
La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitHub](https://github.com/skills/introduction-to-github) su GitHub Skills. Questo corso interattivo ti permetterà di esercitarti in tutto ciò che hai imparato in un ambiente sicuro e guidato. Inoltre, riceverai un fantastico badge quando lo completerai! 🏅
La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitHub](https://github.com/skills/introduction-to-github) su GitHub Skills. Questo corso interattivo ti permetterà di esercitarti in tutto ciò che hai imparato in un ambiente sicuro e guidato. Inoltre, otterrai un fantastico badge quando lo completi! 🏅
**Ti senti pronto per altre sfide?**
- Configura l'autenticazione SSH per il tuo account GitHub (niente più password!)
@ -715,7 +708,7 @@ La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitH
---
## 🚀 La tua timeline di padronanza di GitHub
## 🚀 La tua timeline per padroneggiare GitHub
### ⚡ **Cosa puoi fare nei prossimi 5 minuti**
- [ ] Metti una stella a questo repository e ad altri 3 progetti che ti interessano
@ -725,20 +718,20 @@ La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitH
### 🎯 **Cosa puoi realizzare in quest'ora**
- [ ] Completa il quiz post-lezione e rifletti sul tuo percorso GitHub
- [ ] Configura chiavi SSH per l'autenticazione GitHub senza password
- [ ] Configura le chiavi SSH per un'autenticazione GitHub senza password
- [ ] Crea il tuo primo commit significativo con un ottimo messaggio di commit
- [ ] Esplora la scheda "Esplora" di GitHub per scoprire progetti di tendenza
- [ ] Esercitati a forkare un repository e a fare una piccola modifica
### 📅 **La tua avventura settimanale su GitHub**
### 📅 **La tua avventura GitHub di una settimana**
- [ ] Completa i corsi GitHub Skills (Introduzione a GitHub, Markdown)
- [ ] Fai la tua prima pull request a un progetto open source
- [ ] Configura un sito GitHub Pages per mostrare il tuo lavoro
- [ ] Partecipa alle discussioni su GitHub nei progetti che ti interessano
- [ ] Partecipa alle discussioni GitHub sui progetti che ti interessano
- [ ] Crea un repository con standard di comunità adeguati (README, Licenza, ecc.)
- [ ] Prova GitHub Codespaces per lo sviluppo basato sul cloud
### 🌟 **La tua trasformazione mensile**
### 🌟 **La tua trasformazione in un mese**
- [ ] Contribuisci a 3 diversi progetti open source
- [ ] Fai da mentore a qualcuno nuovo su GitHub (restituisci il favore!)
- [ ] Configura flussi di lavoro automatizzati con GitHub Actions
@ -756,26 +749,27 @@ La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitH
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Il tuo viaggio di fiducia su GitHub
section Oggi
Nervoso: 3: Tu
Curioso: 4: Tu
Eccitato: 5: Tu
section Questa Settimana
Praticando: 4: Tu
Contribuendo: 5: Tu
Connettendo: 5: Tu
section Il Prossimo Mese
Collaborando: 5: Tu
Guidando: 5: Tu
Ispirando Altri: 5: Tu
```
> 🌍 **Benvenuto nella comunità globale degli sviluppatori!** Ora hai gli strumenti per collaborare con milioni di sviluppatori in tutto il mondo. Il tuo primo contributo potrebbe sembrare piccolo, ma ricorda - ogni grande progetto open source è iniziato con qualcuno che ha fatto il suo primo commit. La domanda non è se farai la differenza, ma quale progetto straordinario beneficerà per primo della tua prospettiva unica! 🚀
> 🌍 **Benvenuto nella comunità globale degli sviluppatori!** Ora hai gli strumenti per collaborare con milioni di sviluppatori in tutto il mondo. Il tuo primo contributo potrebbe sembrare piccolo, ma ricorda - ogni grande progetto open source è iniziato con qualcuno che ha fatto il suo primo commit. La domanda non è se farai un impatto, ma quale progetto straordinario beneficerà per primo della tua prospettiva unica! 🚀
Ricorda: ogni esperto è stato un principiante. Ce la puoi fare! 💪
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer (Avvertenza)**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni approfondisce JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua capacità di apprendimento con il nostro approccio didattico basato sui progetti. Inizia oggi il tuo viaggio nel coding!
Unisciti alla Community Discord di Azure AI Foundry
Unisciti alla Community Azure AI Foundry su Discord
[](https://discord.com/invite/ByRwuEEgH4)
Segui questi passaggi per iniziare a utilizzare queste risorse:
1. **Fai un Fork del Repository**: Clicca [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Unisciti alla Community Discord di Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
3. [**Unisciti al Discord Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Supporto Multilingue
#### Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato)
**Se desideri supportare ulteriori traduzioni, le lingue supportate sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desideri supportare ulteriori traduzioni, le lingue disponibili sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Sei uno studente?_
Visita [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher per un certificato gratuito. Questa è la pagina che vuoi salvare nei preferiti e controllare di tanto in tanto, poiché il contenuto viene aggiornato mensilmente.
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher per un certificato gratuito. Questa è la pagina da salvare nei preferiti e controllare di tanto in tanto, poiché i contenuti vengono aggiornati mensilmente.
### 📣 Annuncio - Nuove sfide con la modalità Agent di GitHub Copilot da completare!
### 📣 Annuncio - Nuove sfide con la modalità Agent di GitHub Copilot!
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare utilizzando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent prima, è in grado non solo di generare testo, ma anche di creare e modificare file, eseguire comandi e altro.
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare utilizzando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
### 📣 Annuncio - _Nuovo Progetto da realizzare utilizzando l'Intelligenza Artificiale Generativa_
### 📣 Annuncio - _Nuovo Progetto da costruire utilizzando l'AI Generativa_
Nuovo progetto AI Assistant appena aggiunto, dai un'occhiata [al progetto](./09-chat-project/README.md)
Appena aggiunto un nuovo progetto AI Assistant, dai un'occhiata [al progetto](./09-chat-project/README.md)
- Lezioni che coprono tutto, dai concetti di base a RAG.
- Lezioni che coprono tutto, dalle basi a RAG.
- Interagisci con personaggi storici utilizzando GenAI e la nostra app complementare.
- Narrazione divertente e coinvolgente, viaggerai nel tempo!
@ -79,13 +79,13 @@ Visita [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pe
## 🌱 Per iniziare
## 🌱 Iniziare
> **Insegnanti**, abbiamo [incluso alcune indicazioni](for-teachers.md) su come utilizzare questo curriculum. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come utilizzare questo curriculum. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, inizia con un quiz introduttivo e prosegui leggendo il materiale della lezione, completando le varie attività e verifica la tua comprensione con il quiz finale.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, inizia con un quiz pre-lezione e prosegui leggendo il materiale della lezione, completando le varie attività e verifica la tua comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile per rispondere alle tue domande.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile per rispondere alle tue domande.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi.
@ -97,7 +97,7 @@ Questo curriculum ha un ambiente di sviluppo pronto all'uso! Quando inizi, puoi
Per salvare facilmente il tuo lavoro, ti consigliamo di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Use this template** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passaggi:
1. **Fai un Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
1. **Fai un Fork del Repository**: Clicca sul pulsante "Fork" nell'angolo in alto a destra di questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Eseguire il curriculum in un Codespace
@ -108,16 +108,15 @@ Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code*
#### Eseguire il curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti per aiutarti a scegliere quello che funziona meglio per te.
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti, così potrai scegliere quello che funziona meglio per te.
La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che ha anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona il tuo repository sul tuo computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
[CodeSpace](./images/createcodespace.png)
Poi, apri [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
Poi, apri il [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
```bash
git clone <your-repository-url>
@ -125,8 +124,7 @@ La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.vis
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella che hai appena clonato.
> Estensioni consigliate per Visual Studio Code:
> Estensioni consigliate per Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima le pagine HTML all'interno di Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente
@ -155,50 +153,50 @@ La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.vis
| 03 | Introduzione | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fondamenti JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fondamenti JS | Funzioni e Metodi | Impara le funzioni e i metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fondamenti JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fondamenti JS | Array e Cicli | Lavora con i dati usando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 06 | Fondamenti JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice utilizzando metodi decisionali | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fondamenti JS | Array e Cicli | Lavora con i dati utilizzando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | [Introduzione a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui fondamenti del CSS inclusa la creazione di una pagina responsiva | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle chiusure e sulla manipolazione DOM | [Chiusure JavaScript, manipolazione DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui fondamenti del CSS incluso rendere la pagina responsiva | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle chiusure e sulla manipolazione del DOM | [Chiusure JavaScript, manipolazione DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Gioco di Scrittura](./4-typing-game/solution/README.md) | Costruire un Gioco di Scrittura | Impara a utilizzare gli eventi della tastiera per guidare la logica della tua app JavaScript | [Programmazione Basata su Eventi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come creare i primi elementi di un'estensione per browser | [Informazioni sui Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare un'API e memorizzare variabili nella memoria locale | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate nella memoria locale | [API, Moduli e Memoria Locale](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l'icona dell'estensione; impara le prestazioni web e alcune ottimizzazioni per migliorare | [Attività in Background e Prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Gioco Spaziale](./6-space-game/solution/README.md) | Sviluppo di Giochi più Avanzati con JavaScript | Impara l'Ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Gioco Spaziale](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, usata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Gioco Spaziale](./6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento usando le coordinate cartesiane e l'API Canvas | [Muovere Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Gioco Spaziale](./6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai collidere gli elementi e falli reagire tra loro usando i tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento delle Collisioni](./6-space-game/4-collision-detection/README.md) | Chris |
| 13 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare un'API e memorizzare variabili in local storage | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate in local storage | [API, Moduli e Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Utilizza i processi in background del browser per gestire l'icona dell'estensione; impara le prestazioni web e alcune ottimizzazioni per migliorare | [Attività in Background e Prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Gioco Spaziale](./6-space-game/solution/README.md) | Sviluppo di Giochi più Avanzato con JavaScript | Impara l'Ereditarietà utilizzando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Gioco Spaziale](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, utilizzata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Gioco Spaziale](./6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento utilizzando le coordinate cartesiane e l'API Canvas | [Muovere Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Gioco Spaziale](./6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai collidere gli elementi e reagire tra loro utilizzando i tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento delle Collisioni](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Gioco Spaziale](./6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Tenere il Punteggio](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Gioco Spaziale](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [Condizione di Fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancaria](./7-bank-project/solution/README.md) | Template HTML e Rotte in un'App Web | Impara a creare la struttura di un sito web multipagina utilizzando routing e template HTML | [Template HTML e Rotte](./7-bank-project/1-template-route/README.md) | Yohan |
| 20 | [Gioco Spaziale](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, incluso il ripulire gli asset e il reimpostare i valori delle variabili | [Condizione di Fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancaria](./7-bank-project/solution/README.md) | Template HTML e Rotte in un'App Web | Impara a creare la struttura dell'architettura di un sito web multipagina utilizzando routing e template HTML | [Template HTML e Rotte](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancaria](./7-bank-project/solution/README.md) | Costruire un Modulo di Login e Registrazione | Impara a costruire moduli e gestire routine di validazione | [Moduli](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancaria](./7-bank-project/solution/README.md) | Metodi per Recuperare e Utilizzare Dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e gestirli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [App Bancaria](./7-bank-project/solution/README.md) | Metodi di Recupero e Utilizzo dei Dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e eliminarli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancaria](./7-bank-project/solution/README.md) | Concetti di Gestione dello Stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello Stato](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice | [Usa l'Editor di Codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a utilizzare un editor di codice| [Usa l'Editor di Codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistenti AI](./9-chat-project/README.md) | Lavorare con l'AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Il nostro curriculum è progettato seguendo due principi pedagogici chiave:
* apprendimento basato sui progetti
Il nostro curriculum è progettato con due principi pedagogici chiave:
* apprendimento basato su progetti
* quiz frequenti
Il programma insegna i fondamenti di JavaScript, HTML e CSS, oltre agli strumenti e alle tecniche più recenti utilizzati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di scrittura, un terrario virtuale, un'estensione per browser eco-friendly, un gioco in stile space-invader e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
Il programma insegna i fondamenti di JavaScript, HTML e CSS, oltre agli strumenti e alle tecniche più recenti utilizzati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di scrittura, un terrario virtuale, un'estensione per browser eco-friendly, un gioco stile space-invader e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
> 🎓 Puoi seguire le prime lezioni di questo curriculum come [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
Assicurandoci che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti viene migliorata. Abbiamo anche scritto diverse lezioni introduttive sui fondamenti di JavaScript per introdurre i concetti, abbinate a un video della collezione di tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Assicurandoci che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo anche scritto diverse lezioni introduttive sui fondamenti di JavaScript per introdurre i concetti, accompagnate da un video della collezione "[Serie per Principianti: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a basso rischio prima della lezione orienta lo studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione garantisce una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano in modo semplice e diventano sempre più complessi alla fine del ciclo di 12 settimane.
Inoltre, un quiz a basso rischio prima di una lezione orienta l'intenzione dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione garantisce una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano piccoli e diventano sempre più complessi entro la fine del ciclo di 12 settimane.
Pur avendo volutamente evitato di introdurre framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Pur avendo volutamente evitato di introdurre framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Serie per Principianti: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visita il nostro [Codice di Condotta](CODE_OF_CONDUCT.md) e le linee guida per [Contribuire](CONTRIBUTING.md). Accogliamo con favore i tuoi feedback costruttivi!
> Visita le nostre [Linee Guida di Condotta](CODE_OF_CONDUCT.md) e [Contributi](CONTRIBUTING.md). Accogliamo con favore il tuo feedback costruttivo!
## 🧭 Accesso offline
Puoi eseguire questa documentazione offline utilizzando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sul tuo computer locale, e poi nella cartella principale di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
Puoi eseguire questa documentazione offline utilizzando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella principale di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
## 📘 PDF
@ -209,6 +207,7 @@ Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io
Il nostro team produce altri corsi! Dai un'occhiata:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -217,45 +216,47 @@ Il nostro team produce altri corsi! Dai un'occhiata:
---
### Serie AI Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serie Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Se hai difficoltà o domande sulla creazione di app AI, unisciti a:
Se ti trovi in difficoltà o hai domande sulla creazione di app AI, unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente.
[](https://aka.ms/foundry/discord)
Se hai feedback sui prodotti o riscontri errori durante la creazione, visita:
Se hai feedback sui prodotti o incontri errori durante la creazione, visita:
[](https://aka.ms/foundry/forum)
[](https://aka.ms/foundry/forum)
## Licenza
Questo repository è concesso sotto licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer (Avvertenza)**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
此教學大綱已準備好開發環境！開始時，您可以選擇在[Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行教學大綱，或在您的電腦上使用文字編輯器如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)進行本地運行。
這份課程已經準備好開發環境！開始時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在你的電腦上使用如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器。
我們建議使用[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作為您的編輯器，它還內建了[終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可以在[此處](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載Visual Studio Code。
我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它還內建 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在 [這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載Visual Studio Code。
1. 將您的儲存庫克隆到您的電腦。您可以點擊**Code**按鈕並複製URL：
1. 將你的儲存庫克隆到電腦上。你可以點擊 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
然後，在[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)內的[終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)中運行以下指令，將`<your-repository-url>`替換為您剛複製的URL：
然後，在[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下指令，將 `<your-repository-url>` 替換為你剛剛複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開資料夾。你可以點擊 **File** > **Open Folder**，然後選擇你剛剛克隆的資料夾。
2. 在Visual Studio Code中開啟資料夾。您可以點擊**檔案** > **開啟資料夾**，然後選擇您剛克隆的資料夾。
> 推薦的 Visual Studio Code 擴展：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
所有課程的 PDF 可在 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。
所有課程的 PDF 可在 [這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。
## 🎒 其他課程
@ -205,14 +203,14 @@ CO_OP_TRANSLATOR_METADATA:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
如果您在建立 AI 應用程式時遇到困難或有任何疑問，歡迎加入學習者和有經驗的開發者的討論。這是一個支持性的社群，問題受到歡迎，知識自由分享。
[](https://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
Hallo daar, toekomstige ontwikkelaar! 👋 Klaar om je aan te sluiten bij miljoenen programmeurs wereldwijd? Ik ben echt enthousiast om je kennis te laten maken met GitHub – zie het als een soort social media platform voor programmeurs, maar in plaats van foto's van je lunch te delen, delen we code en bouwen we samen geweldige dingen!
Hallo daar, toekomstige ontwikkelaar! 👋 Klaar om je aan te sluiten bij miljoenen programmeurs over de hele wereld? Ik ben echt enthousiast om je kennis te laten maken met GitHub – zie het als een soort social media platform voor programmeurs, maar in plaats van foto's van je lunch te delen, delen we code en bouwen we samen geweldige dingen!
Wat ik echt geweldig vind: elke app op je telefoon, elke website die je bezoekt, en de meeste tools die je leert gebruiken, zijn gemaakt door teams van ontwikkelaars die samenwerken op platforms zoals GitHub. Die muziekapp waar je dol op bent? Iemand zoals jij heeft eraan bijgedragen. Dat spel waar je niet mee kunt stoppen? Ja, waarschijnlijk gebouwd met GitHub-samenwerking. En nu ga JIJ leren hoe je deel kunt uitmaken van die geweldige community!
Wat ik echt geweldig vind: elke app op je telefoon, elke website die je bezoekt, en de meeste tools die je gaat leren gebruiken, zijn gebouwd door teams van ontwikkelaars die samenwerken op platforms zoals GitHub. Die muziekapp waar je dol op bent? Iemand zoals jij heeft eraan bijgedragen. Dat spel waar je niet mee kunt stoppen? Ja, waarschijnlijk gebouwd met GitHub-samenwerking. En nu ga JIJ leren hoe je deel kunt uitmaken van die geweldige community!
Ik weet dat dit in het begin misschien wat overweldigend lijkt – ik weet nog dat ik naar mijn eerste GitHub-pagina staarde en dacht: "Wat betekent dit allemaal?" Maar het zit zo: elke ontwikkelaar is precies begonnen waar jij nu bent. Aan het einde van deze les heb je je eigen GitHub-repository (zie het als je persoonlijke projectshowcase in de cloud), en weet je hoe je je werk kunt opslaan, delen met anderen, en zelfs bijdragen aan projecten die door miljoenen mensen worden gebruikt.
Ik weet dat dit in het begin misschien wat overweldigend lijkt – ik herinner me nog dat ik naar mijn eerste GitHub-pagina staarde en dacht: "Wat betekent dit allemaal?" Maar hier is het ding: elke ontwikkelaar is precies begonnen waar jij nu bent. Aan het einde van deze les heb je je eigen GitHub-repository (zie het als je persoonlijke projectshowcase in de cloud), en weet je hoe je je werk kunt opslaan, delen met anderen, en zelfs bijdragen aan projecten die door miljoenen mensen worden gebruikt.
We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk – alleen jij, ik, en een paar hele coole tools die je nieuwe beste vrienden gaan worden!
We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk – alleen jij, ik, en een paar echt coole tools die je nieuwe beste vrienden gaan worden!
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Your GitHub Adventure Today
section Setup
Install Git: 4: You
Create Account: 5: You
First Repository: 5: You
section Master Git
Local Changes: 4: You
Commits & Pushes: 5: You
Branching: 4: You
section Collaborate
Fork Projects: 4: You
Pull Requests: 5: You
Open Source: 5: You
title Jouw GitHub Avontuur Vandaag
section Instellen
Installeer Git: 4: Jij
Maak Account: 5: Jij
Eerste Repository: 5: Jij
section Beheers Git
Lokale Wijzigingen: 4: Jij
Commits & Pushes: 5: Jij
Vertakken: 4: Jij
section Samenwerken
Fork Projecten: 4: Jij
Pull Requests: 5: Jij
Open Source: 5: Jij
```
## Quiz voor de les
[Quiz voor de les](https://ff-quizzes.netlify.app)
Voordat we aan de echt spannende dingen beginnen, gaan we je computer klaarmaken voor wat GitHub-magie! Zie dit als het organiseren van je kunstbenodigdheden voordat je een meesterwerk maakt – de juiste tools klaar hebben maakt alles zoveel soepeler en veel leuker.
Voordat we in de echt spannende dingen duiken, gaan we je computer klaarmaken voor wat GitHub-magie! Zie dit als het organiseren van je kunstbenodigdheden voordat je een meesterwerk maakt – de juiste tools klaar hebben maakt alles zoveel soepeler en veel leuker.
Ik ga je persoonlijk door elke stap van de setup leiden, en ik beloof dat het niet zo intimiderend is als het er in eerste instantie uitziet. Als iets niet meteen duidelijk is, is dat helemaal normaal! Ik weet nog dat ik mijn eerste ontwikkelomgeving instelde en het gevoel had dat ik oude hiërogliefen probeerde te ontcijferen. Elke ontwikkelaar heeft precies gestaan waar jij nu bent, zich afvragend of ze het goed doen. Spoiler alert: als je hier aan het leren bent, doe je het al goed! 🌟
Ik ga je persoonlijk door elke stap van de setup leiden, en ik beloof dat het niet zo intimiderend is als het er in eerste instantie uitziet. Als iets niet meteen duidelijk is, is dat helemaal normaal! Ik herinner me dat ik mijn eerste ontwikkelomgeving instelde en het gevoel had dat ik oude hiërogliefen probeerde te lezen. Elke ontwikkelaar heeft precies gestaan waar jij nu bent, zich afvragend of ze het goed doen. Spoiler alert: als je hier bent en leert, doe je het al goed! 🌟
In deze les behandelen we:
@ -54,16 +53,16 @@ In deze les behandelen we:
### Vereisten
Laten we je computer klaarmaken voor wat GitHub-magie! Maak je geen zorgen – deze setup hoef je maar één keer te doen, en dan ben je helemaal klaar voor je hele programmeerreis.
Laten we je computer klaarmaken voor wat GitHub-magie! Maak je geen zorgen – deze setup hoef je maar één keer te doen, en dan ben je helemaal klaar voor je hele codeerreis.
Oké, laten we beginnen met de basis! Eerst moeten we controleren of Git al op je computer staat. Git is eigenlijk als een super slimme assistent die elke verandering die je aan je code maakt onthoudt – veel beter dan elke twee seconden paniekerig op Ctrl+S drukken (we hebben het allemaal gedaan!).
Laten we kijken of Git al is geïnstalleerd door dit magische commando in je terminal te typen:
`git --version`
Als Git nog niet geïnstalleerd is, geen zorgen! Ga gewoon naar [download Git](https://git-scm.com/downloads) en haal het binnen. Zodra je het hebt geïnstalleerd, moeten we Git goed aan je voorstellen:
Als Git er nog niet is, geen zorgen! Ga gewoon naar [download Git](https://git-scm.com/downloads) en haal het op. Zodra je het hebt geïnstalleerd, moeten we Git goed aan je voorstellen:
> 💡 **Eerste keer instellen**: Deze commando's vertellen Git wie je bent. Deze informatie wordt gekoppeld aan elke commit die je maakt, dus kies een naam en e-mailadres die je comfortabel openbaar wilt delen.
> 💡 **Eerste keer instellen**: Deze commando's vertellen Git wie je bent. Deze informatie wordt gekoppeld aan elke commit die je maakt, dus kies een naam en e-mailadres die je comfortabel openbaar kunt delen.
```bash
git config --global user.name "your-name"
@ -77,11 +76,11 @@ git config --list
Je hebt ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code), en je moet je terminal (of: command prompt) openen.
Ga naar [github.com](https://github.com/) en maak een account aan als je dat nog niet hebt gedaan, of log in en vul je profiel in.
Ga naar [github.com](https://github.com/) en maak een account aan als je dat nog niet hebt, of log in en vul je profiel in.
💡 **Moderne tip**: Overweeg het instellen van [SSH-sleutels](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) of het gebruik van [GitHub CLI](https://cli.github.com/) voor eenvoudigere authenticatie zonder wachtwoorden.
✅ GitHub is niet de enige code repository in de wereld; er zijn andere, maar GitHub is de bekendste.
✅ GitHub is niet de enige code repository ter wereld; er zijn anderen, maar GitHub is de bekendste.
### Voorbereiding
@ -91,26 +90,26 @@ Je hebt zowel een map met een codeproject op je lokale machine (laptop of pc) no
Laten we het even over beveiliging hebben – maar maak je geen zorgen, we gaan je niet overweldigen met enge dingen! Zie deze beveiligingspraktijken als het op slot doen van je auto of je huis. Het zijn eenvoudige gewoontes die vanzelfsprekend worden en je harde werk beschermen.
We laten je vanaf het begin de moderne, veilige manieren zien om met GitHub te werken. Op deze manier ontwikkel je goede gewoontes die je goed van pas zullen komen tijdens je programmeercarrière.
We laten je vanaf het begin de moderne, veilige manieren zien om met GitHub te werken. Op deze manier ontwikkel je goede gewoontes die je goed van pas zullen komen tijdens je hele carrière als ontwikkelaar.
Bij het werken met GitHub is het belangrijk om de beste beveiligingspraktijken te volgen:
| Beveiligingsgebied | Beste praktijk | Waarom het belangrijk is |
| **Authenticatie** | Gebruik SSH-sleutels of Personal Access Tokens | Wachtwoorden zijn minder veilig en worden uitgefaseerd |
| **Tweefactorauthenticatie** | Schakel 2FA in op je GitHub-account | Voegt een extra laag bescherming toe aan je account |
| **Repositorybeveiliging** | Nooit gevoelige informatie committen | API-sleutels en wachtwoorden mogen nooit in openbare repos staan |
| **Repositorybeveiliging** | Commit nooit gevoelige informatie | API-sleutels en wachtwoorden mogen nooit in openbare repositories staan |
| **Afhankelijkheidsbeheer** | Schakel Dependabot in voor updates | Houdt je afhankelijkheden veilig en up-to-date |
> ⚠️ **Belangrijke beveiligingsherinnering**: Nooit API-sleutels, wachtwoorden of andere gevoelige informatie committen naar een repository. Gebruik omgevingsvariabelen en `.gitignore`-bestanden om gevoelige gegevens te beschermen.
> ⚠️ **Belangrijke beveiligingsherinnering**: Commit nooit API-sleutels, wachtwoorden of andere gevoelige informatie naar een repository. Gebruik omgevingsvariabelen en `.gitignore`-bestanden om gevoelige gegevens te beschermen.
Oké, DIT is waar het echt spannend wordt! 🎉 We gaan leren hoe je je code kunt volgen en beheren zoals de professionals dat doen, en eerlijk gezegd is dit een van mijn favoriete dingen om te leren omdat het zo'n game-changer is.
Oké, DIT is waar het echt spannend wordt! 🎉 We gaan leren hoe je je code kunt bijhouden en beheren zoals de professionals dat doen, en eerlijk gezegd is dit een van mijn favoriete dingen om te leren omdat het zo'n game-changer is.
Stel je dit voor: je schrijft een geweldig verhaal en je wilt elke versie, elke briljante bewerking, en elke "wacht, dat is geniaal!" moment onderweg bijhouden. Dat is precies wat Git doet voor je code! Het is alsof je een ongelooflijk tijdreizend notitieboek hebt dat ALLES onthoudt – elke toetsaanslag, elke verandering, elke "oeps, dat heeft alles kapot gemaakt" moment dat je direct kunt terugdraaien.
Stel je dit voor: je schrijft een geweldig verhaal en je wilt elke versie, elke briljante bewerking en elke "wacht, dat is geniaal!" moment onderweg bijhouden. Dat is precies wat Git doet voor je code! Het is alsof je een ongelooflijk tijdreizend notitieboek hebt dat ALLES onthoudt – elke toetsaanslag, elke verandering, elke "oeps, dat heeft alles kapot gemaakt" moment dat je onmiddellijk kunt terugdraaien.
Ik geef toe– dit kan in het begin overweldigend aanvoelen. Toen ik begon, dacht ik: "Waarom kan ik mijn bestanden niet gewoon normaal opslaan?" Maar vertrouw me hierop: zodra Git voor je klikt (en dat zal gebeuren!), krijg je een van die aha-momenten waarin je denkt: "Hoe heb ik OOIT geprogrammeerd zonder dit?" Het is alsof je ontdekt dat je kunt vliegen terwijl je overal naartoe liep!
Ik zal eerlijk zijn– dit kan in het begin overweldigend aanvoelen. Toen ik begon, dacht ik: "Waarom kan ik mijn bestanden niet gewoon normaal opslaan?" Maar vertrouw me hierop: zodra Git voor je klikt (en dat zal gebeuren!), krijg je een van die aha-momenten waarin je denkt: "Hoe heb ik OOIT gecodeerd zonder dit?" Het is alsof je ontdekt dat je kunt vliegen terwijl je overal naartoe liep!
Stel dat je een map lokaal hebt met een codeproject en je wilt je voortgang gaan volgen met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan je toekomstige zelf. Door je commitberichten dagen, weken of maanden later te lezen, kun je je herinneren waarom je een bepaalde beslissing hebt genomen, of een wijziging "terugdraaien" – dat is, als je goede "commitberichten" schrijft.
Stel dat je een map lokaal hebt met een codeproject en je wilt je voortgang gaan bijhouden met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan je toekomstige zelf. Door je commitberichten dagen, weken of maanden later te lezen, kun je je herinneren waarom je een beslissing hebt genomen, of een verandering "terugdraaien" – dat is, als je goede "commitberichten" schrijft.
```mermaid
flowchart TD
A[📁 Your Project Files] --> B{Is it a Git Repository?}
B -->|No| C[git init]
B -->|Yes| D[Make Changes]
A[📁 Jouw Projectbestanden] --> B{Is het een Git Repository?}
B -->|Nee| C[git init]
B -->|Ja| D[Aanpassingen maken]
C --> D
D --> E[git add .]
E --> F["git commit -m 'message'"]
E --> F["git commit -m 'bericht'"]
F --> G[git push]
G --> H[🌟 Code on GitHub!]
G --> H[🌟 Code op GitHub!]
H --> I{Want to collaborate?}
I -->|Yes| J[Fork & Clone]
I -->|No| D
J --> K[Create Branch]
K --> L[Make Changes]
H --> I{Wil je samenwerken?}
I -->|Ja| J[Fork & Clone]
I -->|Nee| D
J --> K[Maak een Branch]
K --> L[Aanpassingen maken]
L --> M[Pull Request]
M --> N[🎉 Contributing!]
M --> N[🎉 Bijdragen!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Taak: Maak je eerste repository!
> 🎯 **Je missie (en ik ben zo enthousiast voor je!)**: We gaan samen je allereerste GitHub-repository maken! Tegen de tijd dat we klaar zijn, heb je je eigen plekje op het internet waar je code leeft, en heb je je eerste "commit" gemaakt (dat is ontwikkelaarstaal voor het opslaan van je werk op een slimme manier).
> 🎯 **Je missie (en ik ben zo enthousiast voor je!)**: We gaan samen je allereerste GitHub-repository maken! Tegen de tijd dat we hier klaar zijn, heb je je eigen plekje op het internet waar je code leeft, en heb je je eerste "commit" gemaakt (dat is ontwikkelaarstaal voor het slim opslaan van je werk).
>
> Dit is echt zo'n speciaal moment – je staat op het punt officieel deel uit te maken van de wereldwijde community van ontwikkelaars! Ik herinner me nog de opwinding van het maken van mijn eerste repo en dacht: "Wauw, ik ben echt bezig!"
> Dit is echt zo'n speciaal moment – je staat op het punt officieel deel uit te maken van de wereldwijde community van ontwikkelaars! Ik herinner me nog de opwinding van het maken van mijn eerste repo en dacht: "Wauw, ik doe dit echt!"
Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk onderdeel – er is geen prijs voor haasten, en ik beloof dat elke stap logisch zal zijn. Onthoud, elke programmeer-superster die je bewondert, zat ooit precies waar jij nu zit, klaar om hun eerste repository te maken. Hoe gaaf is dat?
Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk onderdeel – er is geen prijs voor haasten, en ik beloof dat elke stap logisch zal zijn. Onthoud, elke codeer-superster die je bewondert, zat ooit precies waar jij nu bent, klaar om hun eerste repository te maken. Hoe cool is dat?
> Bekijk de video
> Bekijk video
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Laten we dit samen doen:**
1. **Maak je repository op GitHub**. Ga naar GitHub.com en zoek naar die felgroene **New** knop (of het **+** teken rechtsboven). Klik erop en selecteer **New repository**.
1. **Maak je repository op GitHub**. Ga naar GitHub.com en zoek naar die felgroene **Nieuwe** knop (of het **+** teken in de rechterbovenhoek). Klik erop en selecteer **Nieuwe repository**.
Hier is wat je moet doen:
1. Geef je repository een naam – maak het iets dat betekenisvol is voor jou!
1. Voeg een beschrijving toe als je wilt (dit helpt anderen te begrijpen waar je project over gaat)
1. Beslis of je het openbaar (iedereen kan het zien) of privé (alleen voor jou) wilt maken
1. Ik raad aan om het vakje aan te vinken om een README-bestand toe te voegen – het is als de voorpagina van je project
1. Klik op **Create repository** en vier feest – je hebt zojuist je eerste repo gemaakt! 🎉
1. Klik op **Repository maken** en vier feest – je hebt zojuist je eerste repo gemaakt! 🎉
2. **Navigeer naar je projectmap**. Laten we nu je terminal openen (maak je geen zorgen, het is niet zo eng als het eruitziet!). We moeten je computer vertellen waar je projectbestanden zijn. Typ dit commando:
2. **Navigeer naar je projectmap**. Laten we nu je terminal openen (maak je geen zorgen, het is niet zo eng als het lijkt!). We moeten je computer vertellen waar je projectbestanden zijn. Typ dit commando:
```bash
cd [name of your folder]
@ -193,8 +191,8 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
```
**Wat er net is gebeurd (best cool spul!):**
- Git heeft een verborgen `.git`map in je project gemaakt – je ziet het niet, maar het is er!
- Je gewone map is nu een "repository" die elke verandering die je maakt kan volgen
- Git heeft een verborgen `.git`-map in je project gemaakt – je ziet het niet, maar het is er!
- Je gewone map is nu een "repository" die elke verandering die je maakt kan bijhouden
- Zie het als het geven van superkrachten aan je map om alles te onthouden
4. **Controleer wat er gebeurt**. Laten we kijken wat Git denkt over je project op dit moment:
@ -205,7 +203,7 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
**Begrijpen wat Git je vertelt:**
Je ziet misschien iets dat er ongeveer zo uitziet:
Je ziet misschien iets dat er zo uitziet:
```output
Changes not staged for commit:
@ -216,12 +214,12 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
modified: file2.txt
```
**Geen paniek! Dit is wat dit betekent:**
- Bestanden in **rood** zijn bestanden die wijzigingen hebben maar nog niet klaar zijn om opgeslagen te worden
**Geen paniek! Dit is wat het betekent:**
- Bestanden in **rood** zijn bestanden die veranderingen hebben maar nog niet klaar zijn om opgeslagen te worden
- Bestanden in **groen** (wanneer je ze ziet) zijn klaar om opgeslagen te worden
- Git is behulpzaam door je precies te vertellen wat je hierna kunt doen
> 💡 **Pro tip**: Het `git status` commando is je beste vriend! Gebruik het altijd als je in de war bent over wat er aan de hand is. Het is alsof je Git vraagt: "Hé, wat is de situatie op dit moment?"
> 💡 **Pro tip**: Het `git status`-commando is je beste vriend! Gebruik het altijd als je niet zeker weet wat er aan de hand is. Het is als Git vragen: "Hé, wat is de situatie op dit moment?"
5. **Maak je bestanden klaar om op te slaan** (dit heet "staging"):
@ -241,21 +239,21 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
```
**Waarom zou je dit willen doen?**
- Soms wil je gerelateerde wijzigingen samen opslaan
- Soms wil je gerelateerde veranderingen samen opslaan
- Het helpt je werk te organiseren in logische stukken
- Maakt het gemakkelijker te begrijpen wat er is veranderd en wanneer
- Maakt het gemakkelijker om te begrijpen wat er is veranderd en wanneer
**Van gedachten veranderd?** Geen zorgen! Je kunt bestanden uit de staging halen zoals dit:
```bash
# Unstage everything
# Alles ongedaan maken
git reset
# Unstage just one file
# Alleen één bestand ongedaan maken
git reset [file name]
```
Maak je geen zorgen – dit verwijdert je werk niet, het haalt bestanden gewoon uit de "klaar om op te slaan"stapel.
Maak je geen zorgen – dit verwijdert je werk niet, het haalt bestanden gewoon uit de "klaar om op te slaan"-stapel.
6. **Sla je werk permanent op** (maak je eerste commit!):
@ -267,51 +265,51 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
**Wat er net is gebeurd:**
- Git heeft een "snapshot" gemaakt van alle gestaged bestanden op dit exacte moment
- Je commitbericht "first commit" legt uit waar dit opslagpunt over gaat
- Je commitbericht "eerste commit" legt uit waar dit opslagpunt over gaat
- Git heeft deze snapshot een unieke ID gegeven zodat je het altijd later kunt vinden
- Je bent officieel begonnen met het volgen van de geschiedenis van je project!
- Je bent officieel begonnen met het bijhouden van de geschiedenis van je project!
> 💡 **Toekomstige commitberichten**: Voor je volgende commits, wees meer beschrijvend! In plaats van "updated stuff", probeer "Contactformulier toegevoegd aan homepage" of "Bug in navigatiemenu opgelost". Je toekomstige zelf zal je dankbaar zijn!
> 💡 **Toekomstige commitberichten**: Voor je volgende commits, wees meer beschrijvend! In plaats van "dingen bijgewerkt", probeer "Contactformulier toegevoegd aan homepage" of "Bug in navigatiemenu opgelost". Je toekomstige zelf zal je dankbaar zijn!
7. **Verbind je lokale project met GitHub**. Op dit moment bestaat je project alleen op je computer. Laten we het verbinden met je GitHub-repository zodat je het met de wereld kunt delen!
Ga eerst naar je GitHub-repositorypagina en kopieer de URL. Typ vervolgens:
Ga eerst naar je GitHub-repositorypagina en kopieer de URL. Kom dan hier terug en typ:
(Vervang die URL door de daadwerkelijke URL van je repository!)
**Wat we net hebben gedaan:**
- We hebben een verbinding gemaakt tussen je lokale project en je GitHub-repository.
- "Origin" is gewoon een bijnaam voor je GitHub-repository – het is alsof je een contact toevoegt aan je telefoon.
- Nu weet je lokale Git waar je je code naartoe moet sturen wanneer je klaar bent om deze te delen.
💡 **Makkelijker manier**: Als je GitHub CLI hebt geïnstalleerd, kun je dit met één commando doen:
**Wat we net hebben gedaan:**
- We hebben een verbinding gemaakt tussen je lokale project en je GitHub-repository.
- "Origin" is gewoon een bijnaam voor je GitHub-repository – het is alsof je een contact toevoegt aan je telefoon.
- Nu weet je lokale Git waar het je code naartoe moet sturen wanneer je klaar bent om deze te delen.
💡 **Makkelijkere manier**: Als je GitHub CLI hebt geïnstalleerd, kun je dit met één opdracht doen:
```bash
gh repo create my-repo --public --push --source=.
```
8. **Stuur je code naar GitHub** (het grote moment!):
```bash
git push -u origin main
```
**🚀 Dit is het! Je uploadt je code naar GitHub!**
**Wat er gebeurt:**
- Je commits reizen van je computer naar GitHub.
- De `-u` vlag stelt een permanente verbinding in, zodat toekomstige pushes eenvoudiger zijn.
- "main" is de naam van je primaire branch (zoals de hoofdmap).
- Hierna kun je gewoon `git push` typen voor toekomstige uploads!
**🚀 Dit is het! Je uploadt je code naar GitHub!**
**Wat er gebeurt:**
- Je commits reizen van je computer naar GitHub.
- De `-u` vlag stelt een permanente verbinding in, zodat toekomstige pushes eenvoudiger zijn.
- "main" is de naam van je primaire branch (zoals de hoofdmap).
- Hierna kun je gewoon `git push` typen voor toekomstige uploads!
💡 **Snel notitie**: Als je branch een andere naam heeft (zoals "master"), gebruik dan die naam. Je kunt dit controleren met `git branch --show-current`.
💡 **Snelle opmerking**: Als je branch een andere naam heeft (zoals "master"), gebruik dan die naam. Je kunt dit controleren met `git branch --show-current`.
9. **Je nieuwe dagelijkse coderitme** (hier wordt het verslavend!):
Vanaf nu, telkens wanneer je wijzigingen aanbrengt in je project, volg je deze eenvoudige drie stappen:
Vanaf nu, telkens wanneer je wijzigingen aanbrengt in je project, volg je deze eenvoudige drie stappen:
```bash
git add .
@ -319,71 +317,71 @@ Vanaf nu, telkens wanneer je wijzigingen aanbrengt in je project, volg je deze e
git push
```
**Dit wordt je coderingsritme:**
- Maak geweldige wijzigingen in je code ✨
- Stage ze met `git add` ("Hé Git, let op deze wijzigingen!")
- Sla ze op met `git commit` en een beschrijvend bericht (je toekomstige zelf zal je dankbaar zijn!)
- Deel ze met de wereld met `git push` 🚀
- Herhaal – serieus, dit wordt net zo natuurlijk als ademhalen!
**Dit wordt je coderitme:**
- Maak geweldige wijzigingen in je code ✨
- Stage ze met `git add` ("Hey Git, let op deze wijzigingen!")
- Sla ze op met `git commit` en een beschrijvende boodschap (je toekomstige zelf zal je dankbaar zijn!)
- Deel ze met de wereld met `git push` 🚀
- Herhaal – serieus, dit wordt net zo natuurlijk als ademhalen!
Ik hou van deze workflow omdat het is alsof je meerdere save-punten hebt in een videogame. Heb je een wijziging gemaakt waar je trots op bent? Commit het! Wil je iets risicovols proberen? Geen probleem – je kunt altijd teruggaan naar je laatste commit als het misgaat!
Ik hou van deze workflow omdat het voelt alsof je meerdere save-punten hebt in een videogame. Heb je een wijziging gemaakt waar je trots op bent? Commit het! Wil je iets risicovols proberen? Geen probleem – je kunt altijd teruggaan naar je laatste commit als het misgaat!
> 💡 **Tip**: Je wilt misschien ook een `.gitignore`-bestand gebruiken om te voorkomen dat bestanden die je niet wilt volgen op GitHub verschijnen - zoals dat notitiebestand dat je in dezelfde map opslaat maar geen plaats heeft in een openbare repository. Je kunt sjablonen voor `.gitignore`-bestanden vinden op [.gitignore templates](https://github.com/github/gitignore) of er een maken met [gitignore.io](https://www.toptal.com/developers/gitignore).
> 💡 **Tip**: Je wilt misschien ook een `.gitignore`-bestand gebruiken om te voorkomen dat bestanden die je niet wilt volgen op GitHub verschijnen - zoals dat notitiebestand dat je in dezelfde map opslaat maar geen plaats heeft in een openbare repository. Je kunt sjablonen voor `.gitignore`-bestanden vinden op [.gitignore templates](https://github.com/github/gitignore) of er een maken met [gitignore.io](https://www.toptal.com/developers/gitignore).
**Neem een moment om te vieren en te reflecteren:**
- Hoe voelde het om je code voor het eerst op GitHub te zien verschijnen?
- Welke stap vond je het meest verwarrend, en welke verrassend eenvoudig?
- Kun je het verschil uitleggen tussen `git add`, `git commit` en `git push` in je eigen woorden?
- Welke stap voelde het meest verwarrend en welke verrassend eenvoudig?
- Kun je in je eigen woorden het verschil uitleggen tussen `git add`, `git commit` en `git push`?
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Maak project
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! 🎉
GitHub --> [*]: Succes! 🎉
note right of Staged
Files ready to save
Bestanden klaar om op te slaan
end note
note right of Committed
Snapshot created
Snapshot gemaakt
end note
```
> **Onthoud**: Zelfs ervaren ontwikkelaars vergeten soms de exacte commando's. Het kost tijd om deze workflow in je spiergeheugen te krijgen - je doet het geweldig!
> **Onthoud**: Zelfs ervaren ontwikkelaars vergeten soms de exacte commando's. Het laten inslijten van deze workflow als spiergeheugen kost oefening - je doet het geweldig!
#### Moderne Git-workflows
Overweeg deze moderne praktijken te adopteren:
- **Conventional Commits**: Gebruik een gestandaardiseerd commit-berichtformaat zoals `feat:`, `fix:`, `docs:`, enz. Meer informatie op [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Atomic commits**: Zorg ervoor dat elke commit een enkele logische wijziging vertegenwoordigt.
- **Conventional Commits**: Gebruik een gestandaardiseerd formaat voor commitberichten zoals `feat:`, `fix:`, `docs:`, enz. Meer informatie op [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Atomic commits**: Laat elke commit een enkele logische wijziging vertegenwoordigen.
- **Frequent commits**: Commit vaak met beschrijvende berichten in plaats van grote, infrequente commits.
#### Commit-berichten
#### Commitberichten
Een geweldig Git commit-onderwerpregel voltooit de volgende zin:
Als toegepast, zal deze commit <jouwonderwerpregelhier>
Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" in plaats van "veranderd" of "verandert". Net als in het onderwerp, gebruik je in de (optionele) body ook de gebiedende wijs, tegenwoordige tijd. De body moet de motivatie voor de wijziging bevatten en dit contrasteren met het vorige gedrag. Je legt de `waarom` uit, niet de `hoe`.
Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" of "verandert".
Net als in het onderwerp, gebruik in de body (optioneel) ook de gebiedende wijs, tegenwoordige tijd. De body moet de motivatie voor de wijziging bevatten en dit contrasteren met het vorige gedrag. Je legt de `waarom` uit, niet de `hoe`.
✅ Neem een paar minuten om rond te surfen op GitHub. Kun je een echt geweldig commit-bericht vinden? Kun je een heel minimaal bericht vinden? Welke informatie denk je dat het meest belangrijk en nuttig is om over te brengen in een commit-bericht?
✅ Neem een paar minuten om rond te surfen op GitHub. Kun je een echt geweldig commitbericht vinden? Kun je een heel minimaal bericht vinden? Welke informatie denk je dat het meest belangrijk en nuttig is om over te brengen in een commitbericht?
## Samenwerken met anderen (Het leukste deel!)
Hou je vast, want DIT is waar GitHub absoluut magisch wordt! 🪄 Je hebt geleerd hoe je je eigen code beheert, maar nu duiken we in mijn absolute favoriete deel – samenwerken met geweldige mensen van over de hele wereld.
Stel je dit voor: je wordt morgen wakker en ziet dat iemand in Tokio je code heeft verbeterd terwijl je sliep. Dan lost iemand in Berlijn een bug op waar je mee vastzat. Tegen de middag heeft een ontwikkelaar in São Paulo een functie toegevoegd waar je nooit aan had gedacht. Dat is geen sciencefiction – dat is gewoon een normale dinsdag in het GitHub-universum!
Stel je dit voor: je wordt morgen wakker en ziet dat iemand in Tokio je code heeft verbeterd terwijl je sliep. Dan lost iemand in Berlijn een bug op waar je vast mee zat. Tegen de middag heeft een ontwikkelaar in São Paulo een functie toegevoegd waar je nooit aan had gedacht. Dat is geen sciencefiction – dat is gewoon dinsdag in het GitHub-universum!
Wat mij echt enthousiast maakt, is dat de samenwerkingsvaardigheden die je nu gaat leren? Dit zijn PRECIES dezelfde workflows die teams bij Google, Microsoft en je favoriete startups elke dag gebruiken. Je leert niet alleen een coole tool – je leert de geheime taal die de hele softwarewereld samen laat werken.
Wat mij echt enthousiast maakt, is dat de samenwerkingsvaardigheden die je nu gaat leren? Dit zijn PRECIES dezelfde workflows die teams bij Google, Microsoft en je favoriete startups elke dag gebruiken. Je leert niet alleen een coole tool – je leert de geheime taal die ervoor zorgt dat de hele softwarewereld samenwerkt.
Serieus, zodra je de kick ervaart van iemand die je eerste pull request merge, begrijp je waarom ontwikkelaars zo gepassioneerd zijn over open source. Het is alsof je deel uitmaakt van 's werelds grootste, meest creatieve teamproject!
Serieus, zodra je de kick ervaart van iemand die je eerste pull request merge, begrijp je waarom ontwikkelaars zo gepassioneerd raken over open source. Het is alsof je deel uitmaakt van 's werelds grootste, meest creatieve teamproject!
> Bekijk de video
> Bekijk video
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
@ -391,29 +389,28 @@ De belangrijkste reden om dingen op GitHub te zetten was om samenwerking met and
```mermaid
flowchart LR
A[🔍 Find Project] --> B[🍴 Fork Repository]
B --> C[📥 Clone to Local]
C --> D[🌿 Create Branch]
D --> E[✏️ Make Changes]
E --> F[💾 Commit Changes]
A[🔍 Vind Project] --> B[🍴 Fork Repository]
B --> C[📥 Clone naar Lokaal]
C --> D[🌿 Maak Branch]
D --> E[✏️ Maak Wijzigingen]
E --> F[💾 Commit Wijzigingen]
F --> G[📤 Push Branch]
G --> H[🔄 Create Pull Request]
H --> I{Maintainer Review}
I -->|✅ Approved| J[🎉 Merge!]
I -->|❓ Changes Requested| K[📝 Make Updates]
G --> H[🔄 Maak Pull Request]
H --> I{Onderhoudersreview}
I -->|✅ Goedgekeurd| J[🎉 Samenvoegen!]
I -->|❓ Wijzigingen Aangevraagd| K[📝 Maak Updates]
K --> F
J --> L[🧹 Clean Up Branches]
J --> L[🧹 Opruimen Branches]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
Navigeer in je repository naar `Insights > Community` om te zien hoe je project zich verhoudt tot aanbevolen communitystandaarden.
In je repository, navigeer naar `Insights > Community` om te zien hoe je project zich verhoudt tot aanbevolen communitystandaarden.
Wil je dat je repository er professioneel en uitnodigend uitziet? Ga naar je repository en klik op `Insights > Community`. Deze coole functie laat zien hoe je project zich verhoudt tot wat de GitHub-community beschouwt als "goede repository-praktijken."
Wil je je repository er professioneel en uitnodigend uit laten zien? Ga naar je repository en klik op `Insights > Community`. Deze coole functie laat zien hoe je project zich verhoudt tot wat de GitHub-community beschouwt als "goede repository-praktijken."
> 🎯 **Je project laten stralen**: Een goed georganiseerde repository met goede documentatie is als een schone, uitnodigende etalage. Het laat mensen zien dat je om je werk geeft en maakt dat anderen willen bijdragen!
> 🎯 **Je project laten stralen**: Een goed georganiseerde repository met goede documentatie is als een schone, uitnodigende winkel. Het laat mensen zien dat je om je werk geeft en maakt anderen enthousiast om bij te dragen!
**Wat een repository geweldig maakt:**
@ -421,7 +418,7 @@ Wil je dat je repository er professioneel en uitnodigend uitziet? Ga naar je rep
| **Beschrijving** | Eerste indrukken tellen! | Mensen weten meteen wat je project doet |
| **README** | De voorpagina van je project | Als een vriendelijke gids voor nieuwe bezoekers |
| **Bijdrage-richtlijnen** | Laat zien dat je hulp verwelkomt | Mensen weten precies hoe ze kunnen helpen |
| **Bijdrage-richtlijnen** | Laat zien dat je hulp verwelkomt | Mensen weten precies hoe ze je kunnen helpen |
| **Gedragscode** | Creëert een vriendelijke ruimte | Iedereen voelt zich welkom om deel te nemen |
| **Licentie** | Juridische duidelijkheid | Anderen weten hoe ze je code kunnen gebruiken |
| **Beveiligingsbeleid** | Laat zien dat je verantwoordelijk bent | Toont professionele praktijken |
@ -439,55 +436,54 @@ Wil je dat je repository er professioneel en uitnodigend uitziet? Ga naar je rep
- **GitHub Projects** voor kanban-stijl projectbeheer.
- **Branch-beschermingsregels** om codekwaliteitsnormen af te dwingen.
Al deze middelen zullen het onboarden van nieuwe teamleden ten goede komen. En dit zijn meestal de dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar je code kijken, om te bepalen of jouw project de juiste plek is om hun tijd aan te besteden.
Al deze middelen zullen het onboarden van nieuwe teamleden ten goede komen. En dit zijn meestal de dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar je code kijken, om te bepalen of jouw project de juiste plek is om hun tijd te besteden.
✅ README-bestanden, hoewel ze tijd kosten om te maken, worden vaak verwaarloosd door drukke maintainers. Kun je een voorbeeld vinden van een bijzonder beschrijvende README? Opmerking: er zijn enkele [tools om goede READMEs te maken](https://www.makeareadme.com/) die je misschien wilt proberen.
### Taak: Code samenvoegen
Bijdrage-documenten helpen mensen om bij te dragen aan het project. Het legt uit welke soorten bijdragen je zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te kunnen dragen aan je repo op GitHub:
Bijdrage-documentatie helpt mensen bijdragen aan het project. Het legt uit welke soorten bijdragen je zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om te kunnen bijdragen aan je repo op GitHub:
1. **Fork je repo**. Je wilt waarschijnlijk dat mensen je project _forken_. Forken betekent dat ze een kopie van je repository maken op hun GitHub-profiel.
2. **Clone**. Vanaf daar klonen ze het project naar hun lokale machine.
3. **Maak een branch**. Je wilt dat ze een _branch_ maken voor hun werk.
4. **Focus hun wijziging op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - zo is de kans groter dat je hun werk kunt _mergen_. Stel je voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als je slechts 2 van de 3, of 1 van de 3 wijzigingen wilt of kunt implementeren?
1. **Je repo forken**. Je wilt waarschijnlijk dat mensen je project _forken_. Forken betekent dat ze een kopie van je repository maken op hun GitHub-profiel.
1. **Clonen**. Vanaf daar zullen ze het project naar hun lokale machine clonen.
1. **Een branch maken**. Je wilt dat ze een _branch_ maken voor hun werk.
1. **Focus hun wijziging op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - zo is de kans groter dat je hun werk kunt _mergen_. Stel je voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als je slechts 2 van de 3, of 1 van de 3 wijzigingen wilt of kunt implementeren?
✅ Stel je een situatie voor waarin branches bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Aan welke gebruiksscenario's kun je denken?
✅ Stel je een situatie voor waarin branches bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke gebruiksscenario's kun je bedenken?
> Let op, wees de verandering die je in de wereld wilt zien, en maak ook branches voor je eigen werk. Alle commits die je maakt, worden gemaakt op de branch waar je momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke branch dat is.
> Opmerking, wees de verandering die je wilt zien in de wereld, en maak ook branches voor je eigen werk. Alle commits die je maakt, worden gedaan op de branch waar je momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke branch dat is.
Laten we een workflow voor bijdragers doornemen. Stel dat de bijdrager de repo al heeft _geforkt_ en _gekloned_, zodat ze een Git-repo hebben die klaar is om aan te werken op hun lokale machine:
Laten we een workflow voor bijdragers doorlopen. Stel dat de bijdrager de repo al heeft _geforkt_ en _gecloned_, zodat ze een Git-repo hebben die klaar is om aan te werken op hun lokale machine:
1. **Maak een branch**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
1. **Een branch maken**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
```bash
git branch [branch-name]
```
> 💡 **Moderne aanpak**: Je kunt ook een nieuwe branch maken en er in één commando naar overschakelen:
> 💡 **Moderne aanpak**: Je kunt ook een nieuwe branch maken en ernaar overschakelen in één commando:
```bash
git switch -c [branch-name]
```
2. **Schakel over naar de werkbranch**. Schakel over naar de opgegeven branch en werk de werkdirectory bij met `git switch`:
1. **Overschakelen naar werkbranch**. Schakel over naar de opgegeven branch en werk de werkmap bij met `git switch`:
```bash
git switch [branch-name]
```
> 💡 **Moderne notitie**: `git switch` is de moderne vervanging voor `git checkout` bij het wisselen van branches. Het is duidelijker en veiliger voor beginners.
> 💡 **Moderne opmerking**: `git switch` is de moderne vervanging voor `git checkout` bij het wisselen van branches. Het is duidelijker en veiliger voor beginners.
3. **Doe je werk**. Op dit punt wil je je wijzigingen toevoegen. Vergeet niet om Git hierover te informeren met de volgende commando's:
1. **Werk uitvoeren**. Op dit punt wil je je wijzigingen toevoegen. Vergeet niet om Git hierover te informeren met de volgende commando's:
```bash
git add .
git commit -m "my changes"
```
> ⚠️ **Kwaliteit van commit-berichten**: Zorg ervoor dat je je commit een goede naam geeft, zowel voor jezelf als voor de maintainer van de repo waaraan je helpt. Wees specifiek over wat je hebt veranderd!
> ⚠️ **Commitberichtkwaliteit**: Zorg ervoor dat je je commit een goede naam geeft, zowel voor jezelf als voor de maintainer van de repo waaraan je helpt. Wees specifiek over wat je hebt veranderd!
4. **Combineer je werk met de `main` branch**. Op een gegeven moment ben je klaar met werken en wil je je werk combineren met dat van de `main` branch. De `main` branch kan ondertussen zijn veranderd, dus zorg ervoor dat je deze eerst bijwerkt naar de nieuwste versie met de volgende commando's:
1. **Je werk combineren met de `main` branch**. Op een gegeven moment ben je klaar met werken en wil je je werk combineren met dat van de `main` branch. De `main` branch kan ondertussen zijn veranderd, dus zorg ervoor dat je deze eerst bijwerkt naar de nieuwste versie met de volgende commando's:
```bash
git switch main
@ -501,75 +497,73 @@ Laten we een workflow voor bijdragers doornemen. Stel dat de bijdrager de repo a
git merge main
```
Het commando `git merge main`zal alle wijzigingen van `main` in je branch brengen. Hopelijk kun je gewoon doorgaan. Zo niet, dan zal VS Code je vertellen waar Git _verward_ is en kun je de betreffende bestanden aanpassen om aan te geven welke inhoud het meest accuraat is.
Het commando `git merge main`brengt alle wijzigingen van `main` naar je branch. Hopelijk kun je gewoon doorgaan. Zo niet, dan zal VS Code je vertellen waar Git _verward_ is en pas je de getroffen bestanden aan om aan te geven welke inhoud het meest accuraat is.
💡 **Modern alternatief**: Overweeg om `git rebase` te gebruiken voor een schonere geschiedenis:
💡 **Modern alternatief**: Overweeg `git rebase` te gebruiken voor een schonere geschiedenis:
```bash
git rebase main
```
Dit speelt je commits opnieuw af bovenop de nieuwste main branch, waardoor een lineaire geschiedenis ontstaat.
5. **Stuur je werk naar GitHub**. Je werk naar GitHub sturen betekent twee dingen: je branch naar je repo pushen en vervolgens een PR (Pull Request) openen.
1. **Stuur je werk naar GitHub**. Je werk naar GitHub sturen betekent twee dingen. Je branch naar je repo pushen en vervolgens een PR, Pull Request, openen.
```bash
git push --set-upstream origin [branch-name]
```
Het bovenstaande commando maakt de branch aan in je geforkte repo.
Het bovenstaande commando maakt de branch aan op je geforkte repo.
### 🤝 **Samenwerkingsvaardigheden Check: Klaar om met anderen te werken?**
**Laten we kijken hoe je je voelt over samenwerking:**
- Begrijp je nu het idee van forken en pull requests?
- Wat is één ding over werken met branches dat je meer wilt oefenen?
- Hoe comfortabel voel je je bij het bijdragen aan het project van iemand anders?
- Hoe comfortabel voel je je bij het bijdragen aan iemand anders' project?
```mermaid
mindmap
root((Git Collaboration))
Branching
Feature branches
Bug fix branches
Experimental work
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
root((Git Samenwerking))
Vertakken
Functievertakkingen
Bugfixvertakkingen
Experimenteel werk
Pull-verzoeken
Codebeoordeling
Discussie
Testen
Beste Praktijken
Duidelijke commitberichten
Kleine gerichte wijzigingen
Goede documentatie
```
> **Zelfvertrouwenbooster**: Elke ontwikkelaar die je bewondert, was ooit nerveus over hun eerste pull request. De GitHub-community is ongelooflijk gastvrij voor nieuwkomers!
> **Zelfvertrouwen boost**: Elke ontwikkelaar die je bewondert, was ooit nerveus over hun eerste pull request. De GitHub-community is ongelooflijk gastvrij voor nieuwkomers!
1. **Open een PR**. Vervolgens wil je een PR openen. Dat doe je door naar de geforkte repo op GitHub te navigeren. Je ziet een indicatie op GitHub waar wordt gevraagd of je een nieuwe PR wilt maken, je klikt daarop en je wordt naar een interface gebracht waar je de commitberichttitel kunt wijzigen, een meer geschikte beschrijving kunt geven. Nu zal de maintainer van de repo die je hebt geforkt deze PR zien en _duimen omhoog_ hopelijk waarderen en _mergen_. Je bent nu een bijdrager, yay :)
6. **Open een PR**. Vervolgens wil je een PR openen. Dat doe je door naar de geforkte repo op GitHub te navigeren. Je ziet een indicatie op GitHub waar wordt gevraagd of je een nieuwe PR wilt maken. Klik daarop en je wordt naar een interface geleid waar je de commit-berichttitel kunt wijzigen en een meer geschikte beschrijving kunt geven. Nu ziet de maintainer van de repo die je hebt geforkt deze PR en _duimen omhoog_ ze zullen je PR waarderen en _mergen_. Je bent nu een bijdrager, yay :)
💡 **Moderne tip**: Je kunt ook PR's maken met GitHub CLI:
💡 **Moderne tip**: Je kunt ook PR's maken met GitHub CLI:
- Link naar gerelateerde issues met trefwoorden zoals "Fixes #123".
- Voeg screenshots toe voor UI-wijzigingen.
- Vraag specifieke reviewers.
- Gebruik concept-PR's voor werk in uitvoering.
- Zorg ervoor dat alle CI-controles slagen voordat je een review aanvraagt.
🔧 **Best practices voor PR's**:
- Link naar gerelateerde issues met trefwoorden zoals "Fixes #123".
- Voeg screenshots toe voor UI-wijzigingen.
- Vraag specifieke reviewers.
- Gebruik concept-PR's voor werk dat nog in uitvoering is.
- Zorg ervoor dat alle CI-controles slagen voordat je een review aanvraagt.
1. **Opruimen**. Het wordt als goede gewoonte beschouwd om _op te ruimen_ nadat je succesvol een PR hebt samengevoegd. Je wilt zowel je lokale branch als de branch die je naar GitHub hebt gepusht opruimen. Laten we eerst de lokale branch verwijderen met het volgende commando:
```bash
git branch -d [branch-name]
```
Ga vervolgens naar de GitHub-pagina van de geforkte repo en verwijder de remote branch die je zojuist hebt gepusht.
Ga vervolgens naar de GitHub-pagina van de geforkte repo en verwijder de remote branch die je net hebt gepusht.
`Pull request` lijkt een vreemde term, omdat je eigenlijk je wijzigingen naar het project wilt pushen. Maar de maintainer (projecteigenaar) of het kernteam moet je wijzigingen beoordelen voordat ze worden samengevoegd met de "main" branch van het project. Je vraagt dus eigenlijk om een besluit over je wijziging van een maintainer.
Een pull request is de plek waar je de verschillen die zijn geïntroduceerd op een branch kunt vergelijken en bespreken, met reviews, opmerkingen, geïntegreerde tests en meer. Een goede pull request volgt ongeveer dezelfde regels als een commit-bericht. Je kunt een verwijzing naar een issue in de issue tracker toevoegen, bijvoorbeeld wanneer je werk een probleem oplost. Dit doe je door een `#` te gebruiken, gevolgd door het nummer van je issue. Bijvoorbeeld `#97`.
Een pull request is de plek om de verschillen die op een branch zijn geïntroduceerd te vergelijken en te bespreken, met reviews, opmerkingen, geïntegreerde tests en meer. Een goede pull request volgt ongeveer dezelfde regels als een commitbericht. Je kunt een verwijzing naar een issue in de issue tracker toevoegen, bijvoorbeeld wanneer je werk een issue oplost. Dit doe je met een `#` gevolgd door het nummer van je issue. Bijvoorbeeld `#97`.
🤞Duimen dat alle checks slagen en de projecteigenaar(s) je wijzigingen in het project samenvoegen🤞
🤞Fingers crossed dat alle checks slagen en de projecteigenaar(s) je wijzigingen in het project samenvoegen🤞
Werk je huidige lokale werkbranch bij met alle nieuwe commits van de corresponderende remote branch op GitHub:
@ -577,53 +571,52 @@ Werk je huidige lokale werkbranch bij met alle nieuwe commits van de corresponde
## Bijdragen aan Open Source (Jouw Kans om Impact te Maken!)
Ben je klaar voor iets dat je compleet gaat verbazen? 🤯 Laten we het hebben over bijdragen aan open source projecten – ik krijg kippenvel alleen al bij het idee om dit met je te delen!
Ben je klaar voor iets dat je compleet zal verbazen? 🤯 Laten we het hebben over bijdragen aan open source projecten – ik krijg kippenvel alleen al bij het idee om dit met je te delen!
Dit is jouw kans om deel uit te maken van iets echt buitengewoons. Stel je voor dat je de tools verbetert die miljoenen ontwikkelaars elke dag gebruiken, of een bug oplost in een app waar je vrienden dol op zijn. Dat is niet zomaar een droom – dat is waar bijdragen aan open source over gaat!
Dit is jouw kans om deel uit te maken van iets echt buitengewoons. Stel je voor dat je de tools verbetert die miljoenen ontwikkelaars elke dag gebruiken, of een bug oplost in een app die je vrienden geweldig vinden. Dat is niet zomaar een droom – dat is waar bijdragen aan open source om draait!
Hier is wat me elke keer weer kippenvel bezorgt als ik eraan denk: elke tool waarmee je hebt leren werken – je code-editor, de frameworks die we gaan verkennen, zelfs de browser waarin je dit leest – begon met iemand zoals jij die zijn allereerste bijdrage leverde. Die briljante ontwikkelaar die jouw favoriete VS Code-extensie heeft gebouwd? Die was ooit een beginner die met trillende handen op "create pull request" klikte, net zoals jij dat binnenkort gaat doen.
Hier is wat me elke keer weer kippenvel bezorgt: elke tool waarmee je hebt leren werken – je code-editor, de frameworks die we gaan verkennen, zelfs de browser waarin je dit leest – begon met iemand zoals jij die zijn allereerste bijdrage leverde. Die briljante ontwikkelaar die jouw favoriete VS Code-extensie heeft gebouwd? Die was ooit een beginner die met trillende handen op "create pull request" klikte, net zoals jij dat binnenkort gaat doen.
En hier is het mooiste: de open source community is als de grootste groepsknuffel van het internet. De meeste projecten zoeken actief naar nieuwkomers en hebben issues getagd met "good first issue" speciaal voor mensen zoals jij! Maintainers worden echt enthousiast als ze nieuwe bijdragers zien, omdat ze zich hun eigen eerste stappen herinneren.
En hier is het mooiste: de open source community is als de grootste groepsknuffel van het internet. De meeste projecten zoeken actief naar nieuwkomers en hebben issues getagd als "good first issue" speciaal voor mensen zoals jij! Maintainers worden echt enthousiast als ze nieuwe bijdragers zien, omdat ze zich hun eigen eerste stappen herinneren.
```mermaid
flowchart TD
A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
B --> C[📖 Read Contributing Guidelines]
A[🔍 Verken GitHub] --> B[🏷️ Vind "goed eerste probleem"]
B --> C[📖 Lees Bijdrageregels]
C --> D[🍴 Fork Repository]
D --> E[💻 Set Up Local Environment]
E --> F[🌿 Create Feature Branch]
F --> G[✨ Make Your Contribution]
G --> H[🧪 Test Your Changes]
H --> I[📝 Write Clear Commit]
I --> J[📤 Push &Create PR]
J --> K[💬 Engage with Feedback]
K --> L[🎉 Merged! You're a Contributor!]
L --> M[🌟 Find Next Issue]
D --> E[💻 Stel Lokale Omgeving In]
E --> F[🌿 Maak Feature Branch]
F --> G[✨ Maak Je Bijdrage]
G --> H[🧪 Test Je Wijzigingen]
H --> I[📝 Schrijf Duidelijke Commit]
I --> J[📤 Push &Maak PR]
J --> K[💬 Reageer op Feedback]
K --> L[🎉 Samengevoegd! Je bent een Bijdrager!]
L --> M[🌟 Vind Volgend Probleem]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Je leert hier niet alleen coderen – je bereidt je voor om deel uit te maken van een wereldwijde familie van bouwers die elke dag wakker worden met de gedachte "Hoe kunnen we de digitale wereld een beetje beter maken?" Welkom bij de club! 🌟
Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert en waaraan je een wijziging wilt bijdragen. Je wilt de inhoud naar je computer kopiëren.
Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert en waaraan je een wijziging wilt bijdragen. Je wilt de inhoud naar je machine kopiëren.
✅ Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH of de GitHub CLI (Command Line Interface).
Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH, of de GitHub CLI (Command Line Interface).
Open je terminal en clone de repository als volgt:
Open je terminal en clone de repository zoals volgt:
```bash
# Using HTTPS
# HTTPS gebruiken
git clone https://github.com/ProjectURL
# Using SSH (requires SSH key setup)
# SSH gebruiken (vereist SSH-sleutelconfiguratie)
git clone git@github.com:username/repository.git
# Using GitHub CLI
# GitHub CLI gebruiken
gh repo clone username/repository
```
@ -631,18 +624,18 @@ Om aan het project te werken, ga naar de juiste map:
`cd ProjectURL`
Je kunt het hele project ook openen met:
- **[GitHub Codespaces](https://github.com/features/codespaces)** - De cloudontwikkelomgeving van GitHub met VS Code in de browser
- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub's cloudontwikkelomgeving met VS Code in de browser
- **[GitHub Desktop](https://desktop.github.com/)** - Een GUI-applicatie voor Git-operaties
- **[GitHub.dev](https://github.dev)** - Druk op de `.`-toets in een GitHub-repo om VS Code in de browser te openen
- **[GitHub.dev](https://github.dev)** - Druk op de `.`-toets in een GitHubrepo om VS Code in de browser te openen
- **VS Code** met de GitHub Pull Requests-extensie
Je kunt de code ook downloaden in een gecomprimeerde map.
Je kunt de code ook downloaden in een gezipte map.
### Een paar interessante dingen over GitHub
Je kunt elke openbare repository op GitHub ster geven, volgen en/of "forken". Je kunt je gestarred repositories vinden in het dropdownmenu rechtsboven. Het is als bladwijzers maken, maar dan voor code.
Projecten hebben een issue tracker, meestal op GitHub in het tabblad "Issues", tenzij anders aangegeven, waar mensen problemen met betrekking tot het project bespreken. En het tabblad Pull Requests is waar mensen wijzigingen bespreken en beoordelen die in behandeling zijn.
Projecten hebben een issue tracker, meestal op GitHub in de "Issues"-tab tenzij anders aangegeven, waar mensen problemen met betrekking tot het project bespreken. En de Pull Requests-tab is waar mensen wijzigingen bespreken en beoordelen die in behandeling zijn.
Projecten kunnen ook discussies hebben in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC.
@ -652,19 +645,19 @@ Projecten kunnen ook discussies hebben in forums, mailinglijsten of chatkanalen
- **Security tab** - Rapporten over kwetsbaarheden en beveiligingsadviezen
- **Actions tab** - Bekijk geautomatiseerde workflows en CI/CD-pijplijnen
- **Insights tab** - Analytics over bijdragers, commits en projectgezondheid
- **Projects tab** - De ingebouwde projectmanagementtools van GitHub
✅ Kijk rond in je nieuwe GitHub-repo en probeer een paar dingen, zoals instellingen bewerken, informatie toevoegen aan je repo, een project maken (zoals een Kanban-bord) en GitHub Actions instellen voor automatisering. Er is zoveel dat je kunt doen!
✅ Kijk eens rond in je nieuwe GitHub repo en probeer een paar dingen, zoals instellingen bewerken, informatie toevoegen aan je repo, een project maken (zoals een Kanban-bord), en GitHub Actions instellen voor automatisering. Er is zoveel dat je kunt doen!
---
## 🚀 Uitdaging
Oké, het is tijd om je nieuwe GitHub-superkrachten te testen! 🚀 Hier is een uitdaging die alles op de meest bevredigende manier laat klikken:
Oké, het is tijd om je nieuwe GitHubsuperkrachten te testen! 🚀 Hier is een uitdaging die alles op de meest bevredigende manier laat klikken:
Pak een vriend (of dat familielid dat altijd vraagt wat je doet met al die "computer dingen") en ga samen op een collaboratief codeeravontuur! Dit is waar de echte magie gebeurt – maak een project, laat hen het forken, maak wat branches en voeg wijzigingen samen zoals de professionals die jullie aan het worden zijn.
Pak een vriend (of dat familielid dat altijd vraagt wat je doet met al die "computer dingen") en ga samen op een collaboratief codeeravontuur! Dit is waar de echte magie gebeurt – maak een project, laat hen het forken, maak wat branches, en voeg wijzigingen samen zoals de professionals die jullie aan het worden zijn.
Ik ga niet liegen – je zult waarschijnlijk op een gegeven moment lachen (vooral als jullie allebei proberen dezelfde regel te wijzigen), misschien even in verwarring raken, maar je zult zeker die geweldige "aha!"-momenten hebben die alle moeite waard maken. Plus, er is iets speciaals aan het delen van die eerste succesvolle merge met iemand anders – het is als een kleine viering van hoe ver je bent gekomen!
Ik ga niet liegen – je zult waarschijnlijk op een gegeven moment lachen (vooral als jullie allebei proberen dezelfde regel te wijzigen), misschien je hoofd krabben van verwarring, maar je zult zeker die geweldige "aha!"-momenten hebben die al het leren de moeite waard maken. Plus, er is iets speciaals aan het delen van die eerste succesvolle merge met iemand anders – het is als een kleine viering van hoe ver je bent gekomen!
Heb je nog geen codeervriend? Geen zorgen! De GitHub-community zit vol met ongelooflijk gastvrije mensen die zich herinneren hoe het was om nieuw te zijn. Zoek naar repositories met "good first issue"-labels – ze zeggen eigenlijk "Hey beginners, kom leren met ons!" Hoe geweldig is dat?
@ -682,7 +675,7 @@ Hier zijn een paar fantastische bronnen om je te helpen oefenen en nog beter te
- [Gids voor bijdragen aan open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Jouw routekaart om een verschil te maken
- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Houd deze bij de hand voor snelle referentie!
En onthoud: oefening maakt vooruitgang, geen perfectie! Hoe meer je Git en GitHub gebruikt, hoe natuurlijker het wordt. GitHub heeft enkele geweldige interactieve cursussen gemaakt waarmee je in een veilige omgeving kunt oefenen:
En onthoud: oefening maakt vooruitgang, geen perfectie! Hoe meer je Git en GitHub gebruikt, hoe natuurlijker het wordt. GitHub heeft een aantal geweldige interactieve cursussen gemaakt waarmee je in een veilige omgeving kunt oefenen:
- [Introductie tot GitHub](https://github.com/skills/introduction-to-github)
- [Communiceren met Markdown](https://github.com/skills/communicate-using-markdown)
@ -693,25 +686,25 @@ En onthoud: oefening maakt vooruitgang, geen perfectie! Hoe meer je Git en GitHu
- [GitHub CLI documentatie](https://cli.github.com/manual/) – Voor wanneer je je als een command-line tovenaar wilt voelen
- [GitHub Codespaces documentatie](https://docs.github.com/en/codespaces) – Code in de cloud!
- [GitHub Actions documentatie](https://docs.github.com/en/actions) – Automatiseer alles
- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) – Verhoog je workflowvaardigheden
- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) – Verbeter je workflow
## GitHub Copilot Agent Uitdaging 🚀
Gebruik de Agent-modus om de volgende uitdaging te voltooien:
**Beschrijving:** Maak een collaboratief webontwikkelingsproject dat de volledige GitHub-workflow demonstreert die je in deze les hebt geleerd. Deze uitdaging helpt je om repository-creatie, samenwerkingsfuncties en moderne Git-workflows in een realistische situatie te oefenen.
**Beschrijving:** Maak een collaboratief webontwikkelingsproject dat de volledige GitHub workflow demonstreert die je in deze les hebt geleerd. Deze uitdaging helpt je om repository creatie, samenwerkingsfuncties en moderne Git workflows in een realistische situatie te oefenen.
**Prompt:** Maak een nieuwe openbare GitHub-repository voor een eenvoudig "Web Development Resources"-project. De repository moet een goed gestructureerd README.md-bestand bevatten met een lijst van nuttige webontwikkelingshulpmiddelen en -bronnen, georganiseerd per categorie (HTML, CSS, JavaScript, enz.). Stel de repository in met de juiste communitystandaarden, inclusief een licentie, richtlijnen voor bijdragen en een gedragscode. Maak ten minste twee feature branches: één voor het toevoegen van CSS-bronnen en een andere voor JavaScript-bronnen. Maak commits naar elke branch met beschrijvende commit-berichten, en maak vervolgens pull requests om de wijzigingen terug te voegen naar main. Schakel GitHub-functies zoals Issues, Discussions in en stel een basis GitHub Actions-workflow in voor geautomatiseerde controles.
**Prompt:** Maak een nieuwe openbare GitHubrepository voor een eenvoudig "Web Development Resources"-project. De repository moet een goed gestructureerde README.md bevatten met een lijst van nuttige webontwikkelingshulpmiddelen en -bronnen, georganiseerd per categorie (HTML, CSS, JavaScript, etc.). Stel de repository in met de juiste communitystandaarden, inclusief een licentie, richtlijnen voor bijdragen en een gedragscode. Maak minstens twee feature branches: één voor het toevoegen van CSS-bronnen en een andere voor JavaScript-bronnen. Maak commits naar elke branch met beschrijvende commitberichten, en maak vervolgens pull requests om de wijzigingen terug te voegen naar main. Schakel GitHub-functies zoals Issues, Discussions in en stel een basis GitHub Actions workflow in voor geautomatiseerde checks.
## Opdracht
Jouw missie, als je ervoor kiest om deze te accepteren: Voltooi de [Introductie tot GitHub](https://github.com/skills/introduction-to-github) cursus op GitHub Skills. Deze interactieve cursus laat je alles wat je hebt geleerd oefenen in een veilige, begeleide omgeving. Plus, je krijgt een coole badge als je klaar bent! 🏅
**Klaar voor meer uitdagingen?**
- Stel SSH-authenticatie in voor je GitHub-account (nooit meer wachtwoorden!)
- Stel SSH-authenticatie in voor je GitHub-account (geen wachtwoorden meer!)
- Probeer GitHub CLI te gebruiken voor je dagelijkse Git-operaties
- Maak een repository met een GitHub Actions-workflow
- Verken GitHub Codespaces door deze repository te openen in een cloud-gebaseerde editor
- Maak een repository met een GitHub Actionsworkflow
- Verken GitHub Codespaces door deze repository te openen in een cloudgebaseerde editor
---
@ -724,58 +717,59 @@ Jouw missie, als je ervoor kiest om deze te accepteren: Voltooi de [Introductie
- [ ] Volg 5 ontwikkelaars wiens werk je inspireert
### 🎯 **Wat Je Binnen Een Uur Kunt Bereiken**
- [ ] Voltooi de quiz na de les en reflecteer op je GitHub-reis
- [ ] Voltooi de post-les quiz en reflecteer op je GitHub-reis
- [ ] Stel SSH-sleutels in voor wachtwoordvrije GitHub-authenticatie
- [ ] Maak je eerste betekenisvolle commit met een geweldig commit-bericht
- [ ] Verken het "Explore"-tabblad van GitHub om trending projecten te ontdekken
- [ ] Maak je eerste betekenisvolle commit met een geweldig commitbericht
- [ ] Verken GitHub's "Explore"-tab om trending projecten te ontdekken
- [ ] Oefen met het forken van een repository en het maken van een kleine wijziging
### 📅 **Je Week-Lange GitHub Avontuur**
- [ ] Voltooi de GitHub Skills-cursussen (Introductie tot GitHub, Markdown)
- [ ] Voltooi de GitHub Skillscursussen (Introductie tot GitHub, Markdown)
- [ ] Maak je eerste pull request naar een open source project
- [ ] Stel een GitHub Pages-site in om je werk te laten zien
- [ ] Stel een GitHub Pagessite in om je werk te laten zien
- [ ] Doe mee aan GitHub Discussions over projecten die je interesseren
- [ ] Maak een repository met de juiste communitystandaarden (README, Licentie, enz.)
- [ ] Probeer GitHub Codespaces voor cloud-gebaseerde ontwikkeling
- [ ] Maak een repository met de juiste communitystandaarden (README, Licentie, etc.)
- [ ] Probeer GitHub Codespaces voor cloudgebaseerde ontwikkeling
### 🌟 **Je Maand-Lange Transformatie**
- [ ] Draag bij aan 3 verschillende open source projecten
- [ ] Begeleid iemand die nieuw is op GitHub (geef het door!)
- [ ] Mentor iemand die nieuw is op GitHub (geef het door!)
- [ ] Stel geautomatiseerde workflows in met GitHub Actions
- [ ] Bouw een portfolio waarin je GitHub-bijdragen worden getoond
- [ ] Bouw een portfolio dat je GitHub-bijdragen laat zien
- [ ] Doe mee aan Hacktoberfest of vergelijkbare community-evenementen
- [ ] Word een maintainer van je eigen project waar anderen aan bijdragen
### 🎓 **Eindcontrole GitHub Meesterschap**
### 🎓 **Eindcontrole van GitHub Meesterschap**
**Vier hoe ver je bent gekomen:**
- Wat vind je het leukste aan het gebruik van GitHub?
- Wat is je favoriete ding aan het gebruik van GitHub?
- Welke samenwerkingsfunctie vind je het meest interessant?
- Hoe zelfverzekerd voel je je nu over bijdragen aan open source?
- Hoe zelfverzekerd voel je je over bijdragen aan open source nu?
- Wat is het eerste project waaraan je wilt bijdragen?
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Jouw GitHub Vertrouwen Reis
section Vandaag
Nerveus: 3: Jij
Nieuwsgierig: 4: Jij
Opgewonden: 5: Jij
section Deze Week
Oefenen: 4: Jij
Bijdragen: 5: Jij
Verbinden: 5: Jij
section Volgende Maand
Samenwerken: 5: Jij
Leiden: 5: Jij
Anderen Inspireren: 5: Jij
```
> 🌍 **Welkom bij de wereldwijde ontwikkelaarscommunity!** Je hebt nu de tools om samen te werken met miljoenen ontwikkelaars wereldwijd. Je eerste bijdrage lijkt misschien klein, maar onthoud - elk groot open source project begon met iemand die zijn allereerste commit maakte. De vraag is niet of je impact zult maken, maar welk geweldig project als eerste zal profiteren van jouw unieke perspectief! 🚀
Onthoud: elke expert was ooit een beginner. Je kunt dit! 💪
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis!
Word lid van de Azure AI Foundry Discord Community
[](https://discord.com/invite/ByRwuEEgH4)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de repository**: Klik op [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de Repository**: Klik [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Ondersteuning voor meerdere talen
### 🌐 Meertalige Ondersteuning
#### Ondersteund via GitHub Action (Automatisch & Altijd up-to-date)
#### Ondersteund via GitHub Action (Automatisch & Altijd Up-to-Date)
**Als je wilt dat er extra vertalingen worden ondersteund, staan de ondersteunde talen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Als je extra vertalingen wilt, staan de ondersteunde talen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ben je een student?_
Bezoek [**Student Hub pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentenpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en af en toe wilt bekijken, omdat we maandelijks de inhoud wisselen.
Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, aangezien we maandelijks de inhoud wisselen.
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent mode uitdagingen om te voltooien!
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien!
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dat is een nieuwe uitdaging voor jou om te voltooien met behulp van GitHub Copilot en Agent mode. Als je Agent mode nog niet hebt gebruikt, het kan niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging die je kunt voltooien met GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt, het kan niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
### 📣 Aankondiging - _Nieuw Project om te bouwen met Generatieve AI_
Nieuw AI-assistentproject zojuist toegevoegd, bekijk het [project](./09-chat-project/README.md)
### 📣 Aankondiging - _Nieuw curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
Mis ons nieuwe Generatieve AI-curriculum niet!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om aan de slag te gaan!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
- Prompting en prompt engineering
- Tekst- en afbeeldingsappgeneratie
- Tekst- en afbeeldingsapp-generatie
- Zoekapps
Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om aan de slag te gaan!
Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om te beginnen!
## 🌱 Aan de slag
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe u dit curriculum kunt gebruiken. We horen graag uw feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin voor elke les met een quiz voorafgaand aan de les en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de les.
Om je leerervaring te verbeteren, kun je samenwerken met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
Om je leerervaring te verbeteren, werk samen met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
Om je opleiding verder te ontwikkelen, raden we aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen.
### 📋 Je omgeving instellen
Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Zodra je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving waarvoor geen installatie nodig is_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Zodra je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties nodig_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Maak je repository
Om je werk eenvoudig op te slaan, raden we aan om een eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.
#### Maak je repository aan
Om je werk gemakkelijk op te slaan, raden we aan om je eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.
Volg deze stappen:
1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Volg deze stappen:
1. **Fork de Repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Het curriculum draaien in een Codespace
In jouw kopie van deze repository die je hebt gemaakt, klik je op de knop **Code** en selecteer je**Open with Codespaces**. Dit maakt een nieuwe Codespace voor je om in te werken.
In je kopie van deze repository die je hebt gemaakt, klik op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je om in te werken.
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties leiden voor elk van deze tools, zodat je kunt kiezen wat het beste bij je past.
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot Programmeertalen en Tools van het Vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden, zodat je kunt kiezen wat het beste voor je werkt.
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als je editor te gebruiken, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiëren:
[CodeSpace](./images/createcodespace.png)
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer de volgende opdracht uit, waarbij je `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je net hebt gekopieerd:
```bash
git clone <your-repository-url>
```
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je net hebt gekloond.
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gekloond.
> Aanbevolen Visual Studio Code-extensies:
>
> Aanbevolen Visual Studio Code-extensies:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven
## 📂 Elke les bevat:
- optionele sketchnote
- optionele aanvullende video
- opwarmquiz voorafgaand aan de les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
- kenniscontroles
- een uitdaging
- aanvullende literatuur
- opdracht
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
- optionele sketchnote
- optionele aanvullende video
- opwarmquiz voorafgaand aan de les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
- kennischecks
- een uitdaging
- aanvullende literatuur
- opdracht
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/). De quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map.
> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/) en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map.
| 01 | Aan de slag | Introductie tot programmeren en tools van het vakgebied | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt bij hun werk | [Introductie tot programmeertalen en tools van het vakgebied](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken in een team | Hoe je GitHub gebruikt in je project en hoe je samenwerkt met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basis | JavaScript Datatypes | De basis van JavaScript-datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basis | Functies en Methodes | Leer over functies en methodes om de logische stroom van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basis | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code kunt maken met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basis | Arrays en Lussen | Werk met gegevens met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een lay-out | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basis van CSS, inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een sleep-en-neerzet interface, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typingspel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Formulieren bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, Formulieren en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Ruimtespel](./6-space-game/solution/README.md) | Geavanceerdere Game Development met JavaScript | Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimtespel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimtespel](./6-space-game/solution/README.md) | Elementen over het scherm bewegen | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimtespel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsaanslagen en zorg voor een cooldownfunctie voor de prestaties | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimtespel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimtespel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer hoe je het spel kunt beëindigen en opnieuw starten, inclusief het opruimen van middelen en het resetten van variabelen | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de structuur van een meerpagina-website kunt opzetten met routing en HTML-sjablonen | [HTML-sjablonen en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Een inlog- en registratieformulier bouwen | Leer hoe je formulieren bouwt en validatieroutines uitvoert | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor het ophalen en gebruiken van gegevens | Hoe gegevens in en uit je app stromen, hoe je ze ophaalt, opslaat en verwijdert | [Gegevens](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app de status behoudt en hoe je deze programmeerbaar kunt beheren | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen | [Introductie tot programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief werken in een team | Hoe GitHub te gebruiken in je project, hoe samen te werken met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basisprincipes | JavaScript Datatypes | De basisprincipes van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basisprincipes | Functies en Methoden | Leer over functies en methoden om de logische stroom van een applicatie te beheren | [Functies en Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basisprincipes | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code kunt maken met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basisprincipes | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een drag/drop interface, met de focus op closures en DOM manipulatie | [JavaScript Closures, DOM manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typingspel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, Formulieren, en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en enkele optimalisaties om te maken | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Ruimtespel](./6-space-game/solution/README.md) | Meer Geavanceerde Spelontwikkeling met JavaScript | Leer over Inheritance met zowel Classes als Composition en het Pub/Sub patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimtespel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimtespel](./6-space-game/solution/README.md) | Elementen bewegen over het scherm | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimtespel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsen en zorg voor een cooldown functie om de prestaties van het spel te garanderen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimtespel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score Bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimtespel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabele waarden | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML Templates en Routes in een Webapp | Leer hoe je de structuur van een meerpagina website kunt opzetten met routing en HTML templates | [HTML Templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een Inlog- en Registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden om Data op te halen en te gebruiken | Hoe data in en uit je app stroomt, hoe je het kunt ophalen, opslaan en verwijderen | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app de staat behoudt en hoe je deze programmatisch kunt beheren | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiek
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectmatig leren
* frequente quizzen
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectgebaseerd leren
* frequente quizzen
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invaders-achtig spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling.
> 🎓 Je kunt de eerste paar lessen in dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
> 🎓 Je kunt de eerste paar lessen van dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten versterkt. We hebben ook enkele startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten vergroot. We hebben ook verschillende startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gecombineerd met een video uit de "[Beginnersserie: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.
Daarnaast zorgt een laagdrempelige quiz voorafgaand aan een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie garandeert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden tegen het einde van de 12-weekse cyclus steeds complexer.
Daarnaast zet een laagdrempelige quiz voorafgaand aan een les de student aan tot het leren van een onderwerp, terwijl een tweede quiz na de les zorgt voor verdere retentie. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus.
Hoewel we bewust hebben vermeden JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat we een framework adopteren, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginnersserie: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
## 🧭 Offline toegang
Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repository, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repository`docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
Je kunt deze documentatie offline uitvoeren met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de rootmap van deze repo`docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
## 📘 PDF
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andere Cursussen
Ons team produceert ook andere cursussen! Bekijk:
Ons team produceert andere cursussen! Bekijk:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -237,17 +237,16 @@ Ons team produceert ook andere cursussen! Bekijk:
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij:
Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community waar vragen welkom zijn en kennis vrij wordt gedeeld.
[](https://aka.ms/foundry/discord)
Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek dan:
[](https://aka.ms/foundry/forum)
@ -255,5 +254,7 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Привет, будущий разработчик! 👋 Готов присоединиться к миллионам программистов по всему миру? Я искренне рад познакомить тебя с GitHub – представь это как социальную сеть для программистов, только вместо фотографий обедов мы делимся кодом и создаем невероятные вещи вместе!
Вот что меня действительно поражает: каждое приложение на твоем телефоне, каждый сайт, который ты посещаешь, и большинство инструментов, которые ты будешь использовать, были созданы командами разработчиков, сотрудничающих на платформах вроде GitHub. Твое любимое музыкальное приложение? Кто-то вроде тебя внес в него свой вклад. Та игра, от которой ты не можешь оторваться? Да, скорее всего, она была создана с помощью GitHub. А теперь ТЫ научишься быть частью этого удивительного сообщества!
Вот что меня поражает: каждое приложение на твоем телефоне, каждый сайт, который ты посещаешь, и большинство инструментов, которые ты будешь изучать, были созданы командами разработчиков, сотрудничающих на платформах вроде GitHub. То музыкальное приложение, которое ты любишь? Кто-то вроде тебя внес в него свой вклад. Та игра, от которой ты не можешь оторваться? Да, скорее всего, она была создана с помощью GitHub. А теперь ТЫ научишься быть частью этого удивительного сообщества!
Я понимаю, что сначала это может показаться сложным – честно говоря, я помню, как смотрел на свою первую страницу GitHub и думал: "Что это вообще значит?" Но вот в чем дело: каждый разработчик начинал именно с того места, где ты находишься сейчас. К концу этого урока у тебя будет свой собственный репозиторий на GitHub (представь это как личную витрину твоих проектов в облаке), и ты узнаешь, как сохранять свою работу, делиться ею с другими и даже вносить вклад в проекты, которыми пользуются миллионы людей.
Я знаю, что сначала это может показаться сложным – честно, я помню, как смотрел на свою первую страницу GitHub и думал: "Что это вообще значит?" Но вот в чем дело: каждый разработчик начинал именно с того места, где ты сейчас. К концу этого урока у тебя будет свой собственный репозиторий на GitHub (представь это как личную витрину проектов в облаке), и ты узнаешь, как сохранять свою работу, делиться ею с другими и даже вносить вклад в проекты, которыми пользуются миллионы людей.
Мы пройдем этот путь вместе, шаг за шагом. Без спешки, без давления – только ты, я и несколько действительно крутых инструментов, которые скоро станут твоими лучшими друзьями!
[Тест перед лекцией](https://ff-quizzes.netlify.app)
## Введение
Прежде чем мы перейдем к действительно захватывающим вещам, давай подготовим твой компьютер к магии GitHub! Представь это как организацию своих художественных принадлежностей перед созданием шедевра – наличие нужных инструментов делает все намного проще и веселее.
Прежде чем мы погрузимся в действительно увлекательные вещи, давай подготовим твой компьютер для магии GitHub! Представь это как организацию своих художественных принадлежностей перед созданием шедевра – наличие нужных инструментов делает все намного проще и гораздо веселее.
Я лично проведу тебя через каждый этап настройки и обещаю, что это не так уж страшно, как может показаться на первый взгляд. Если что-то сразу не получится, это абсолютно нормально! Я помню, как настраивал свою первую среду разработки и чувствовал себя так, будто пытаюсь расшифровать древние иероглифы. Каждый разработчик был именно там, где ты сейчас, задаваясь вопросом, правильно ли он все делает. Спойлер: если ты здесь и учишься, ты уже на правильном пути! 🌟
Я проведу тебя через каждый шаг настройки лично, и обещаю, это не так уж страшно, как может показаться на первый взгляд. Если что-то сразу не получается, это абсолютно нормально! Я помню, как настраивал свою первую среду разработки и чувствовал себя так, будто пытаюсь читать древние иероглифы. Каждый разработчик был именно там, где ты сейчас, задаваясь вопросом, правильно ли он все делает. Спойлер: если ты здесь и учишься, ты уже делаешь все правильно! 🌟
В этом уроке мы рассмотрим:
- отслеживание работы, которую ты делаешь на своем компьютере
- отслеживание работы на твоем компьютере
- работу над проектами с другими
- как вносить вклад в проекты с открытым исходным кодом
### Предварительные требования
Давай подготовим твой компьютер к магии GitHub! Не переживай – эту настройку нужно сделать только один раз, и ты будешь готов к своему путешествию в мир программирования.
Давай подготовим твой компьютер для магии GitHub! Не переживай – эту настройку нужно сделать только один раз, и потом ты будешь готов ко всему своему кодерскому пути.
Итак, начнем с основы! Сначала нужно проверить, установлен ли Git на твоем компьютере. Git – это как суперумный помощник, который запоминает каждое изменение, которое ты вносишь в свой код – намного лучше, чем постоянно нажимать Ctrl+S каждые две секунды (мы все через это проходили!).
Итак, начнем с основы! Сначала нужно проверить, установлен ли Git на твоем компьютере. Git – это как суперумный помощник, который запоминает каждое изменение, которое ты вносишь в код – гораздо лучше, чем постоянно нажимать Ctrl+S каждые две секунды (мы все там были!).
Давай проверим, установлен ли Git, введя эту волшебную команду в терминале:
`git --version`
Если Git еще не установлен, не переживай! Просто зайди на [скачать Git](https://git-scm.com/downloads) и установи его. После установки нам нужно правильно познакомить Git с тобой:
Если Git еще не установлен, не переживай! Просто зайди на [скачать Git](https://git-scm.com/downloads) и установи его. После установки нужно правильно познакомить Git с тобой:
> 💡 **Первоначальная настройка**: Эти команды сообщают Git, кто ты. Эта информация будет прикреплена к каждому коммиту, который ты сделаешь, поэтому выбери имя и email, которые ты готов публиковать.
> 💡 **Первоначальная настройка**: Эти команды говорят Git, кто ты. Эта информация будет прикреплена к каждому коммиту, который ты сделаешь, так что выбери имя и email, которые ты готов публично показывать.
```bash
git config --global user.name "your-name"
@ -87,30 +86,30 @@ git config --list
Тебе понадобится папка с проектом кода на твоем локальном компьютере (ноутбуке или ПК) и публичный репозиторий на GitHub, который будет служить примером того, как вносить вклад в проекты других.
### Защита твоего кода
### Сохранение твоего кода в безопасности
Давай поговорим о безопасности – но не переживай, мы не будем перегружать тебя сложными вещами! Представь эти практики безопасности как запирание машины или дома. Это простые привычки, которые становятся естественными и защищают твою работу.
Давай поговорим о безопасности – но не переживай, мы не будем перегружать тебя страшными вещами! Представь эти практики безопасности как запирание машины или дома. Это простые привычки, которые становятся естественными и защищают твою работу.
Мы покажем тебе современные, безопасные способы работы с GitHub с самого начала. Таким образом, ты разовьешь хорошие привычки, которые будут полезны на протяжении всей твоей карьеры программиста.
При работе с GitHub важно соблюдать лучшие практики безопасности:
При работе с GitHub важно следовать лучшим практикам безопасности:
| Область безопасности | Лучшая практика | Почему это важно |
| **Аутентификация** | Используй SSH-ключи или персональные токены доступа | Пароли менее безопасны и постепенно уходят в прошлое |
| **Двухфакторная аутентификация** | Включи двухфакторную аутентификацию на своем аккаунте GitHub | Добавляет дополнительный уровень защиты аккаунта |
| **Безопасность репозитория** | Никогда не коммить конфиденциальную информацию | API-ключи и пароли не должны быть в публичных репозиториях |
| **Аутентификация** | Используй SSH-ключи или персональные токены доступа | Пароли менее безопасны и постепенно выводятся из использования |
| **Двухфакторная аутентификация** | Включи 2FA в своем аккаунте GitHub | Добавляет дополнительный уровень защиты аккаунта |
| **Безопасность репозитория** | Никогда не коммить чувствительную информацию | API-ключи и пароли не должны быть в публичных репозиториях |
| **Управление зависимостями** | Включи Dependabot для обновлений | Обеспечивает безопасность и актуальность твоих зависимостей |
> ⚠️ **Критическое напоминание о безопасности**: Никогда не коммить API-ключи, пароли или другую конфиденциальную информацию в любой репозиторий. Используй переменные окружения и файлы `.gitignore` для защиты данных.
> ⚠️ **Критическое напоминание о безопасности**: Никогда не коммить API-ключи, пароли или другую чувствительную информацию в любой репозиторий. Используй переменные окружения и файлы `.gitignore` для защиты данных.
А теперь начинается самое интересное! 🎉 Мы научимся отслеживать и управлять твоим кодом, как это делают профессионалы, и честно говоря, это одна из моих любимых тем для обучения, потому что она действительно меняет подход к работе.
А теперь начинается самое интересное! 🎉 Мы собираемся научиться отслеживать и управлять твоим кодом, как это делают профессионалы, и честно говоря, это одна из моих любимых тем для обучения, потому что она действительно меняет игру.
Представь: ты пишешь удивительную историю и хочешь отслеживать каждый черновик, каждую блестящую правку и каждое "Ого, это гениально!" на этом пути. Именно это Git делает для твоего кода! Это как иметь невероятный блокнот-путешественник во времени, который запоминает ВСЕ– каждое нажатие клавиши, каждое изменение, каждый момент "ой, все сломалось", который ты можешь мгновенно отменить.
Представь: ты пишешь удивительную историю и хочешь отслеживать каждый черновик, каждое блестящее редактирование и каждое "Ого, это гениально!" на протяжении всего процесса. Именно это Git делает для твоего кода! Это как невероятная записная книжка-путешественник во времени, которая запоминает ВСЕ– каждое нажатие клавиши, каждое изменение, каждое "ой, это все сломало", которое ты можешь мгновенно отменить.
Признаюсь – сначала это может показаться сложным. Когда я начинал, я думал: "Почему я просто не могу сохранять свои файлы, как обычно?" Но поверь мне: как только ты поймешь Git (а ты поймешь!), у тебя будет момент озарения, когда ты скажешь: "Как я вообще мог программировать без этого?" Это как открыть для себя способность летать, когда ты всю жизнь ходил пешком!
Признаюсь – сначала это может показаться сложным. Когда я начинал, я думал: "Почему я не могу просто сохранять свои файлы, как обычно?" Но поверь мне: как только ты поймешь Git (а ты поймешь!), у тебя будет момент озарения, когда ты подумаешь: "Как я вообще кодил без этого?" Это как открыть для себя способность летать, когда ты всю жизнь ходил пешком!
Представь, чтоу тебя есть папка с проектом кода на компьютере, и ты хочешь начать отслеживать свой прогресс с помощью git – системы контроля версий. Некоторые сравнивают использование git с написанием любовного письма своему будущему "я". Читая свои сообщения о коммитах через дни, недели или месяцы, ты сможешь вспомнить, почему принял то или иное решение, или "откатить" изменения – конечно, если ты пишешь хорошие сообщения о коммитах.
Допустим,у тебя есть папка с проектом кода на локальном компьютере, и ты хочешь начать отслеживать свой прогресс с помощью git – системы контроля версий. Некоторые сравнивают использование git с написанием любовного письма своему будущему "я". Читая свои сообщения коммитов через дни, недели или месяцы, ты сможешь вспомнить, почему принял то или иное решение, или "откатить" изменение– конечно, если ты пишешь хорошие сообщения коммитов.
```mermaid
flowchart TD
A[📁 Your Project Files] --> B{Is it a Git Repository?}
> 🎯 **Твоя миссия (и я так рад за тебя!)**: Мы вместе создадим твой первый репозиторий на GitHub! К тому времени, как мы закончим, у тебя будет свой маленький уголок в интернете, где будет жить твой код, и ты сделаешь свой первый "коммит" (это разработческое слово, означающее сохранение твоей работы очень умным способом).
> 🎯 **Твоя миссия (и я так рад за тебя!)**: Мы вместе создадим твой первый репозиторий на GitHub! К тому моменту, как мы закончим, у тебя будет свой уголок в интернете, где будет жить твой код, и ты сделаешь свой первый "коммит" (это разработческое слово для сохранения работы умным способом).
>
> Это действительно особенный момент – ты официально присоединяешься к глобальному сообществу разработчиков! Я до сих пор помню восторг от создания своего первого репозитория и мысль: "Вау, я действительно это делаю!"
Давай пройдем через это приключение вместе, шаг за шагом. Не торопись с каждым этапом – здесь нет приза за скорость, и я обещаю, что каждый шаг будет понятен. Помни, каждый разработчик, которым ты восхищаешься, когда-то сидел именно там, где ты сейчас, готовясь создать свой первый репозиторий. Как это круто?
Давай пройдем через это приключение вместе, шаг за шагом. Не торопись с каждым этапом – здесь нет приза за скорость, и я обещаю, что каждый шаг будет понятен. Помни, каждый кодер, которым ты восхищаешься, когда-то сидел именно там, где ты сейчас, готовясь создать свой первый репозиторий. Как это круто?
> Посмотри видео
>
@ -172,8 +170,8 @@ flowchart TD
1. Дай своему репозиторию имя – выбери что-то значимое для тебя!
1. Добавь описание, если хочешь (это поможет другим понять, о чем твой проект)
1. Реши, хочешь ли ты сделать его публичным (все смогут его видеть) или приватным (только для тебя)
1. Рекомендую поставить галочку, чтобы добавить файл README – это как главная страница твоего проекта
1. Нажми **Create repository** и отпразднуй – ты только что создал свой первый репозиторий! 🎉
1. Я рекомендую поставить галочку, чтобы добавить файл README – это как главная страница твоего проекта
1. Нажми **Create repository** и празднуй – ты только что создал свой первый репозиторий! 🎉
2. **Перейди в папку своего проекта**. Теперь откроем твой терминал (не переживай, он не так страшен, как выглядит!). Нам нужно указать компьютеру, где находятся файлы твоего проекта. Введи эту команду:
@ -182,7 +180,7 @@ flowchart TD
```
**Что мы здесь делаем:**
- Мы говорим компьютеру: "Эй, открой папку моего проекта"
- Мы говорим компьютеру: "Эй, отведи меня в папку моего проекта"
- Это как открыть определенную папку на рабочем столе, только мы делаем это текстовыми командами
- Замени `[name of your folder]` на фактическое имя папки твоего проекта
@ -194,8 +192,8 @@ flowchart TD
**Вот что только что произошло (довольно круто!):**
- Git создал скрытую папку `.git` в твоем проекте – ты ее не увидишь, но она там!
- Твоя обычная папка теперь стала "репозиторием", который может отслеживать каждое изменение
- Представь, что ты дал своей папке суперспособности запоминать все
- Твоя обычная папка теперь "репозиторий", который может отслеживать каждое изменение, которое ты делаешь
- Представь это как придание твоей папке суперспособностей, чтобы запоминать все
4. **Проверь, что происходит**. Давай посмотрим, что Git думает о твоем проекте прямо сейчас:
@ -219,9 +217,9 @@ flowchart TD
**Не паникуй! Вот что это значит:**
- Файлы в **красном** – это файлы, которые изменены, но еще не готовы к сохранению
- Файлы в **зеленом** (когда ты их увидишь) готовы к сохранению
- Git помогает, говоря тебе, что ты можешь сделать дальше
- Git помогает, говоря тебе, что именно ты можешь сделать дальше
> 💡 **Совет профессионала**: Команда `git status`– твой лучший друг! Используй ее всякий раз, когда ты запутался в происходящем. Это как спросить Git: "Эй, какая сейчас ситуация?"
> 💡 **Совет профессионала**: Команда `git status`– твой лучший друг! Используй ее всякий раз, когда ты не уверен, что происходит. Это как спросить Git: "Эй, какая сейчас ситуация?"
5. **Подготовь свои файлы к сохранению** (это называется "стейджинг"):
@ -241,17 +239,17 @@ flowchart TD
```
**Почему ты можешь захотеть сделать это?**
- Иногда ты хочешь сохранить связанные изменения вместе
- Иногда ты хочешь сохранять связанные изменения вместе
- Это помогает организовать твою работу в логические блоки
- Упрощает понимание того, что изменилось и когда
- Делает проще понять, что изменилось и когда
**Передумал?** Не переживай! Ты можешь убрать файлы из стейджа вот так:
```bash
# Unstage everything
# Убрать все из индекса
git reset
# Unstage just one file
# Убрать из индекса только один файл
git reset [file name]
```
@ -267,50 +265,51 @@ flowchart TD
**Вот что только что произошло:**
- Git сделал "снимок" всех твоих стейджированных файлов в этот момент
- Твое сообщение о коммите "first commit" объясняет, о чем эта точка сохранения
- Git присвоил этому снимку уникальный ID, чтобы ты всегда мог его найти
- Твое сообщение коммита "first commit" объясняет, о чем эта точка сохранения
- Git дал этому снимку уникальный ID, чтобы ты всегда мог его найти
- Ты официально начал отслеживать историю своего проекта!
> 💡 **Будущие сообщения о коммитах**: Для следующих коммитов будь более описательным! Вместо "обновил что-то" попробуй "Добавил контактную форму на главную страницу" или "Исправил баг в меню навигации". Твое будущее "я" скажет тебе спасибо!
> 💡 **Будущие сообщения коммитов**: Для следующих коммитов будь более описательным! Вместо "обновил что-то" попробуй "Добавил контактную форму на главную страницу" или "Исправил баг в меню навигации". Твое будущее "я" скажет тебе спасибо!
7. **Подключи свой локальный проект к GitHub**. Сейчас твой проект существует только на твоем компьютере. Давай подключим его к твоему репозиторию на GitHub, чтобы ты мог поделиться им с миром!
Сначала зайди на страницу своего репозитория на GitHub и скопируй URL. Затем вернись сюда и введи:
Сначала перейди на страницу своего репозитория на GitHub и скопируй URL. Затем вернись сюда и введи:
(Замени этот URL на фактический URL твоего репозитория!)
**Что мы только что сделали:**
- Мы создали связь между вашим локальным проектом и репозиторием на GitHub.
- "Origin" — это просто прозвище для вашего репозитория на GitHub, как добавление контакта в телефон.
- Теперь ваш локальный Git знает, куда отправлять ваш код, когда вы готовы его поделиться.
💡 **Проще способ**: Если у вас установлен GitHub CLI, вы можете сделать это одной командой:
**Что мы только что сделали:**
- Мы создали связь между вашим локальным проектом и репозиторием на GitHub.
- "Origin" — это просто прозвище для вашего репозитория на GitHub, как добавление контакта в телефон.
- Теперь ваш локальный Git знает, куда отправлять ваш код, когда вы будете готовы поделиться им.
💡 **Проще способ**: Если у вас установлен GitHub CLI, вы можете сделать это одной командой:
```bash
gh repo create my-repo --public --push --source=.
```
8. **Отправьте ваш код на GitHub** (важный момент!):
8. **Отправьте ваш код на GitHub** (вот он, важный момент!):
```bash
git push -u origin main
```
**🚀 Вот оно! Вы загружаете ваш код на GitHub!**
**Что происходит:**
- Ваши коммиты отправляются с вашего компьютера на GitHub.
- Флаг `-u` устанавливает постоянное соединение, чтобы в будущем было проще делать push.
- "main" — это название вашей основной ветки (как главная папка).
- После этого вы можете просто вводить `git push` для будущих загрузок!
**🚀 Это оно! Вы загружаете ваш код на GitHub!**
**Что происходит:**
- Ваши коммиты отправляются с вашего компьютера на GitHub.
- Флаг `-u` устанавливает постоянное соединение, чтобы в будущем было проще отправлять изменения.
- "main" — это название вашей основной ветки (как главная папка).
- После этого для будущих загрузок достаточно просто ввести `git push`!
💡 **Короткая заметка**: Если ваша ветка называется иначе (например, "master"), используйте это название. Вы можете проверить с помощью `git branch --show-current`.
💡 **Быстрая заметка**: Если ваша ветка называется иначе (например, "master"), используйте это название. Вы можете проверить это с помощью команды`git branch --show-current`.
9. **Ваш новый ежедневный ритм кодинга** (вот где начинается зависимость!):
9. **Ваш новый ежедневный ритм кодинга** (вот где это становится увлекательным!):
Теперь, когда вы вносите изменения в ваш проект, у вас есть простой трехшаговый процесс:
С этого момента, когда вы вносите изменения в проект, у вас есть простой трехшаговый процесс:
```bash
git add .
@ -318,101 +317,100 @@ flowchart TD
git push
```
**Это становится вашим сердцебиением кодинга:**
- Внесите крутые изменения в ваш код ✨
- Добавьте их с помощью `git add` ("Эй, Git, обрати внимание на эти изменения!")
- Сохраните их с помощью `git commit` и описательного сообщения (будущий вы скажет вам спасибо!)
- Поделитесь ими с миром, используя `git push` 🚀
- Повторяйте снова и снова — серьезно, это становится таким же естественным, как дыхание!
**Это становится вашим сердцебиением кодинга:**
- Внесите потрясающие изменения в ваш код ✨
- Добавьте их с помощью `git add` ("Эй, Git, обрати внимание на эти изменения!")
- Сохраните их с помощью `git commit` и описательного сообщения (будущий вы скажет вам спасибо!)
- Поделитесь ими с миром, используя `git push` 🚀
- Повторяйте снова и снова – серьезно, это становится таким же естественным, как дыхание!
Мне нравится этот рабочий процесс, потому что он похож на создание множества точек сохранения в видеоигре. Сделали изменение, которое вам нравится? Закоммитьте его! Хотите попробовать что-то рискованное? Без проблем — вы всегда можете вернуться к последнему коммиту, если что-то пойдет не так!
Мне нравится этот рабочий процесс, потому что он похож на создание множества точек сохранения в видеоигре. Сделали изменение, которое вам нравится? Закоммитьте его! Хотите попробовать что-то рискованное? Без проблем – вы всегда можете вернуться к последнему коммиту, если что-то пойдет не так!
> 💡 **Совет**: Возможно, вам также стоит использовать файл `.gitignore`, чтобы предотвратить появление файлов, которые вы не хотите отслеживать, на GitHub — например, файл с заметками, который вы храните в той же папке, но который не должен быть в публичном репозитории. Вы можете найти шаблоны для файлов `.gitignore` на [шаблоны .gitignore](https://github.com/github/gitignore) или создать егос помощью [gitignore.io](https://www.toptal.com/developers/gitignore).
> 💡 **Совет**: Возможно, вы захотите использовать файл `.gitignore`, чтобы предотвратить появление на GitHub файлов, которые вы не хотите отслеживать, например, файлас заметками, который вы храните в той же папке, но который не должен быть в публичном репозитории. Вы можете найти шаблоны для файлов `.gitignore` на странице [.gitignore templates](https://github.com/github/gitignore) или создать егос помощью [gitignore.io](https://www.toptal.com/developers/gitignore).
### 🧠 **Первый репозиторий: как это было?**
**Возьмите минуту, чтобы отпраздновать и подумать:**
- Каково было видеть ваш код на GitHub впервые?
- Какой шаг показался самым запутанным, а какой — удивительно простым?
- Каково было увидеть ваш код на GitHub впервые?
- Какой шаг показался самым запутанным, а какой – неожиданно простым?
- Можете ли вы объяснить разницу между `git add`, `git commit` и `git push` своими словами?
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Создать проект
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! 🎉
GitHub --> [*]: Успех! 🎉
note right of Staged
Files ready to save
Файлы готовы к сохранению
end note
note right of Committed
Snapshot created
Снимок создан
end note
```
> **Помните**: Даже опытные разработчики иногда забывают точные команды. Чтобы этот рабочий процесс стал автоматическим, требуется практика – вы на правильном пути!
> **Помните**: Даже опытные разработчики иногда забывают точные команды. Чтобы этот рабочий процесс стал автоматическим, требуется практика — вы отлично справляетесь!
#### Современные рабочие процессы Git
#### Современные рабочие процессы с Git
Рассмотрите возможность внедрения этих современных практик:
- **Conventional Commits**: Используйте стандартизированный формат сообщений коммитов, например `feat:`, `fix:`, `docs:` и т.д. Узнайте больше на [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Атомарные коммиты**: Пусть каждый коммит представляет собой одно логическое изменение.
- **Conventional Commits**: Используйте стандартизированный формат сообщений коммитов, например,`feat:`, `fix:`, `docs:` и т.д. Подробнее на [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Атомарные коммиты**: Каждый коммит должен представлять собой одно логическое изменение.
- **Частые коммиты**: Делайте коммиты часто с описательными сообщениями, а не редкие и крупные.
#### Сообщения коммитов
Отличная строка темы коммита Git завершает следующее предложение:
Если применить, этот коммит <ваша строка темы здесь>.
Отличная строка темы коммита завершает следующее предложение:
Если применить, этот коммит <ваша строка темы здесь>
Для темы используйте повелительное наклонение в настоящем времени: "изменить", а не "изменил" или "изменяет". Как и в теме, в теле (опционально) также используйте повелительное наклонение в настоящем времени. В теле следует указать мотивацию изменения и сравнить это с предыдущим поведением. Вы объясняете `почему`, а не `как`.
Для темы используйте повелительное наклонение в настоящем времени: "изменить", а не "изменил" или "изменяет".
Как и в теме, в теле (опционально) также используйте повелительное наклонение в настоящем времени. Тело должно включать мотивацию для изменения и контрастировать это с предыдущим поведением. Вы объясняете `почему`, а не `как`.
✅ Потратьте несколько минут, чтобы поискать на GitHub. Можете ли вы найти действительно отличное сообщение коммита? А минимальное? Какую информацию, по вашему мнению, наиболее важно и полезно передать в сообщении коммита?
✅ Потратьте несколько минут, чтобы поискать на GitHub. Можете ли вы найти действительно отличное сообщение коммита? А минимальное? Какую информацию, по вашему мнению, важно и полезно передать в сообщении коммита?
## Работа с другими (самая интересная часть!)
Держитесь крепче, потому что СЕЙЧАС GitHub становится абсолютно волшебным! 🪄 Вы освоили управление своим кодом, а теперь мы погружаемся в мою абсолютную любимую часть — сотрудничество с удивительными людьми со всего мира.
Держитесь крепче, потому что ЗДЕСЬ GitHub становится абсолютно волшебным! 🪄 Вы освоили управление своим кодом, а теперь мы погружаемся в мою абсолютную любимую часть – сотрудничество с удивительными людьми со всего мира.
Представьте: вы просыпаетесь завтра и видите, что кто-то в Токио улучшил ваш код, пока вы спали. Затем кто-то в Берлине исправляет баг, над которым вы застряли. К обеду разработчик из Сан-Паулу добавляет функцию, о которой вы даже не думали. Это не научная фантастика — это просто вторник во вселенной GitHub!
Представьте: вы просыпаетесь завтра и видите, что кто-то в Токио улучшил ваш код, пока вы спали. Затем кто-то в Берлине исправляет баг, с которым вы застряли. К обеду разработчик из Сан-Паулу добавляет функцию, о которой вы даже не думали. Это не научная фантастика – это просто вторник во вселенной GitHub!
Что меня действительно вдохновляет, так это то, что навыки сотрудничества, которые вы собираетесь освоить, — это ТОЧНО те же рабочие процессы, которые команды в Google, Microsoft и ваших любимых стартапах используют каждый день. Вы не просто изучаете крутой инструмент — вы изучаете секретный язык, который позволяет всему миру программного обеспечения работать вместе.
Что меня действительно вдохновляет, так это то, что навыки сотрудничества, которые вы собираетесь освоить, – это ТОЧНО такие же рабочие процессы, которые ежедневно используют команды в Google, Microsoft и ваших любимых стартапах. Вы не просто изучаете крутой инструмент – вы изучаете секретный язык, который позволяет всему миру программного обеспечения работать вместе.
Серьезно, как только вы испытаете восторг от того, что кто-то объединяет ваш первый pull request, вы поймете, почему разработчики так увлечены open source. Это как быть частью самого большого, самого творческого командного проекта в мире!
Серьезно, как только вы испытаете восторг от того, что кто-то объединяет ваш первый pull request, вы поймете, почему разработчики так увлечены open source. Это как быть частью самого большого и креативного командного проекта в мире!
> Посмотрите видео
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
Основная причина размещения вещей на GitHub — сделать возможным сотрудничествос другими разработчиками.
Основная причина размещения проектов на GitHub – это возможность сотрудничатьс другими разработчиками.
```mermaid
flowchart LR
A[🔍 Find Project] --> B[🍴 Fork Repository]
B --> C[📥 Clone to Local]
C --> D[🌿 Create Branch]
D --> E[✏️ Make Changes]
E --> F[💾 Commit Changes]
F --> G[📤 Push Branch]
G --> H[🔄 Create Pull Request]
H --> I{Maintainer Review}
I -->|✅ Approved| J[🎉 Merge!]
I -->|❓ Changes Requested| K[📝 Make Updates]
A[🔍 Найти проект] --> B[🍴 Форк репозитория]
B --> C[📥 Клонировать локально]
C --> D[🌿 Создать ветку]
D --> E[✏️ Внести изменения]
E --> F[💾 Зафиксировать изменения]
F --> G[📤 Отправить ветку]
G --> H[🔄 Создать запрос на слияние]
H --> I{Рецензия мейнтейнера}
I -->|✅ Одобрено| J[🎉 Слияние!]
I -->|❓ Запрошены изменения| K[📝 Внести правки]
K --> F
J --> L[🧹 Clean Up Branches]
J --> L[🧹 Удалить ветки]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
В вашем репозитории перейдите в `Insights > Community`, чтобы увидеть, как ваш проект соответствует рекомендованным стандартам сообщества.
В вашем репозитории перейдите в `Insights > Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества.
Хотите сделать ваш репозиторий профессиональным и гостеприимным? Перейдите в ваш репозиторий и нажмите `Insights > Community`. Эта крутая функция показывает, как ваш проект сравнивается с тем, что сообщество GitHub считает "хорошими практиками репозитория".
Хотите, чтобы ваш репозиторий выглядел профессионально и привлекательно? Зайдите в ваш репозиторий и нажмите на `Insights > Community`. Эта классная функция показывает, как ваш проект соответствует тому, что сообщество GitHub считает "хорошими практиками репозитория".
> 🎯 **Сделайте ваш проект ярким**: Хорошо организованный репозиторий с качественной документацией — это как чистая, гостеприимная витрина. Это показывает людям, что вы заботитесь о своей работе, и заставляет других хотеть внести свой вклад!
> 🎯 **Сделайте ваш проект ярким**: Хорошо организованный репозиторий с качественной документацией – это как чистая, гостеприимная витрина. Это показывает людям, что вы заботитесь о своей работе, и побуждает других захотеть внести свой вклад!
| **Описание** | Первое впечатление имеет значение! | Люди сразу понимают, что делает ваш проект |
| **README** | Главная страница вашего проекта | Как дружелюбный гид для новых посетителей |
| **Руководство по внесению изменений** | Показывает, что вы приветствуете помощь | Люди точно знают, как они могут вам помочь |
| **Руководство по вкладу** | Показывает, что вы приветствуете помощь | Люди знают, как именно они могут помочь вам |
| **Кодекс поведения** | Создает дружелюбное пространство | Все чувствуют себя желанными участниками |
| **Лицензия** | Юридическая ясность | Другие знают, как они могут использовать ваш код |
| **Политика безопасности** | Показывает вашу ответственность | Демонстрирует профессиональные практики |
> 💡 **Профессиональный совет**: GitHub предоставляет шаблоны для всех этих файлов. При создании нового репозитория отметьте галочки, чтобы автоматически сгенерировать эти файлы.
> 💡 **Совет профессионала**: GitHub предоставляет шаблоны для всех этих файлов. При создании нового репозитория отметьте галочки, чтобы автоматически сгенерировать эти файлы.
**Современные функции GitHub для изучения:**
🤖 **Автоматизация и CI/CD:**
- **GitHub Actions** для автоматического тестирования и развертывания.
- **Dependabot** для автоматического обновления зависимостей.
- **GitHub Actions** для автоматического тестирования и развертывания
- **Dependabot** для автоматического обновления зависимостей
💬 **Сообщество и управление проектами:**
- **GitHub Discussions** для обсуждений сообщества вне задач.
- **GitHub Projects** для управления проектами в стиле канбан.
- **Правила защиты веток** для обеспечения стандартов качества кода.
- **GitHub Discussions** для обсуждений сообщества вне рамок задач
- **GitHub Projects** для управления проектами в стиле канбан
- **Правила защиты веток** для обеспечения стандартов качества кода
Все эти ресурсы помогут новым участникам команды. И именно на такие вещи новые участники обращают внимание перед тем, как взглянуть на ваш код, чтобы понять, подходит ли ваш проект для их времени.
Все эти ресурсы помогут в адаптации новых членов команды. И именно на такие вещи обычно обращают внимание новые участники, прежде чем даже взглянуть на ваш код, чтобы понять, стоит ли им тратить свое время на ваш проект.
✅ Файлы README, хотя их подготовка занимает время, часто игнорируются занятыми мейнтейнерами. Можете ли вы найти пример особенно описательного README? Примечание: есть [инструменты для создания хороших README](https://www.makeareadme.com/), которые вам могут понравиться.
✅ README-файлы, хотя их подготовка занимает время, часто игнорируются занятыми мейнтейнерами. Можете ли вы найти пример особенно описательного README? Примечание: существуют [инструменты для создания хороших README](https://www.makeareadme.com/), которые вам могут понравиться.
### Задача: Объедините код
### Задача: Объедините немного кода
Документы для внесения изменений помогают людям вносить вклад в проект. Они объясняют, какие типы вкладов вы ищете и как работает процесс. Участники должны пройти серию шагов, чтобы внести вклад в ваш репозиторий на GitHub:
Документация для участников помогает людям вносить вклад в проект. Она объясняет, какие типы вкладов вы ищете и как работает процесс. Участникам нужно будет пройти несколько шагов, чтобы внести вклад в ваш репозиторий на GitHub:
1. **Форк вашего репозитория**. Вы, вероятно, захотите, чтобы люди _форкали_ ваш проект. Форк означает создание копии вашего репозитория в их профиле на GitHub.
1. **Клонирование**. После этого они клонируют проект на свою локальную машину.
1. **Форк репозитория**. Скорее всего, вы захотите, чтобы люди _форкали_ ваш проект. Форк – это создание копии вашего репозитория в их профиле на GitHub.
1. **Клонирование**. После этого они клонируют проект на свой локальный компьютер.
1. **Создание ветки**. Вы захотите попросить их создать _ветку_ для своей работы.
1. **Сосредоточение изменений на одной области**. Попросите участников сосредоточить свои изменения на одной вещи за раз — так шансы, что вы сможете _объединить_ их работу, выше. Представьте, что они исправляют баг, добавляют новую функцию и обновляют несколько тестов — что, если вы хотите или можете реализовать только 2 из 3 или 1 из 3 изменений?
1. **Сфокусируйтесь на одной области**. Попросите участников сосредоточить свои изменения на чем-то одном – так шансы, что вы сможете _объединить_ их работу, будут выше. Представьте, что они исправляют баг, добавляют новую функцию и обновляют несколько тестов – что, если вы хотите или можете реализовать только 2 из 3 или 1 из 3 изменений?
✅ Представьте ситуацию, где ветки особенно важны для написания и выпуска хорошего кода. Какие случаи использования вы можете придумать?
✅ Представьте ситуацию, где ветки особенно важны для написания и выпуска качественного кода. Какие случаи использования вы можете придумать?
> Заметьте, будьте тем изменением, которое хотите видеть в мире, и создавайте ветки для своей работы тоже. Любые коммиты, которые вы делаете, будут сделаны в ветке, в которой вы сейчас "находитесь". Используйте `git status`, чтобы увидеть, какая это ветка.
> Заметьте, будьте тем изменением, которое вы хотите видеть в мире, и создавайте ветки для своей работы тоже. Любые коммиты, которые вы делаете, будут сделаны в ветке, в которой вы сейчас находитесь. Используйте `git status`, чтобы увидеть, в какой ветке вы находитесь.
Давайте пройдемся по рабочему процессу участника. Предположим, участник уже _форкал_ и _клонировал_ репозиторий, так что у него есть готовый Git-репозиторий на локальной машине:
Давайте пройдемся по рабочему процессу участника. Предположим, участник уже _форкнул_ и _клонировал_ репозиторий, так что у него есть готовый к работе Git-репозиторий на локальной машине:
1. **Создание ветки**. Используйте команду `git branch`, чтобы создать ветку, которая будет содержать изменения, которые они хотят внести:
1. **Создайте ветку**. Используйте команду `git branch`, чтобы создать ветку, которая будет содержать изменения, которые они хотят внести:
```bash
git branch [branch-name]
@ -468,15 +466,15 @@ flowchart LR
git switch -c [branch-name]
```
1. **Переключение на рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую директорию с помощью `git switch`:
1. **Переключитесь на рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую директорию с помощью `git switch`:
```bash
git switch [branch-name]
```
> 💡 **Современная заметка**: `git switch`— это современная замена `git checkout` при смене веток. Она более понятна и безопасна для новичков.
> 💡 **Современная заметка**: `git switch`– это современная замена `git checkout` при смене веток. Она более понятна и безопасна для новичков.
1. **Работа**. На этом этапе вы хотите внести свои изменения. Не забудьте сообщить Git об этом с помощью следующих команд:
1. **Работайте**. На этом этапе вы хотите внести свои изменения. Не забудьте сообщить об этом Gitс помощью следующих команд:
```bash
git add .
@ -485,7 +483,7 @@ flowchart LR
> ⚠️ **Качество сообщения коммита**: Убедитесь, что вы дали вашему коммиту хорошее название, как для себя, так и для мейнтейнера репозитория, которому вы помогаете. Будьте конкретны в том, что вы изменили!
1. **Объединение вашей работы с веткой `main`**. В какой-то момент вы завершаете работу и хотите объединить еес веткой `main`. Ветка `main` могла измениться за это время, поэтому сначала убедитесь, что вы обновилиее до последней версии с помощью следующих команд:
1. **Объедините вашу работу с веткой `main`**. В какой-то момент вы завершите работу и захотите объединить свои измененияс веткой `main`. Ветка `main` могла измениться за это время, поэтому сначала обновитеее до последней версии с помощью следующих команд:
```bash
git switch main
@ -499,7 +497,7 @@ flowchart LR
git merge main
```
Команда `git merge main` объединит все изменения из `main` в вашу ветку. Надеемся, вы сможете просто продолжить. Если нет, VS Code покажет вам, где Git _запутался_, и вы просто измените затронутые файлы, чтобы указать, какой контент наиболее точен.
Команда `git merge main` объединит все изменения из `main` в вашу ветку. Надеемся, вы сможете просто продолжить. Если нет, VS Code покажет вам, где Git _запутался_, и вы просто измените затронутые файлы, чтобы указать, какое содержимое наиболее точное.
💡 **Современная альтернатива**: Рассмотрите использование `git rebase` для более чистой истории:
```bash
@ -507,41 +505,40 @@ flowchart LR
```
Это воспроизводит ваши коммиты поверх последней ветки main, создавая линейную историю.
1. **Отправьте вашу работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Push вашей ветки в ваш репозиторий и затем открытие PR, Pull Request.
1. **Отправьте вашу работу на GitHub**. Отправка вашей работы на GitHub означает две вещи: отправку вашей ветки в ваш репозиторий и затем открытие PR (Pull Request).
```bash
git push --set-upstream origin [branch-name]
```
Вышеприведенная команда создает ветку в вашем форкнутом репозитории.
Команда выше создает ветку в вашем форкнутом репозитории.
### 🤝 **Проверка навыков сотрудничества: готовы работать с другими?**
**Давайте посмотрим, как вы чувствуете себя в отношении сотрудничества:**
- Теперь идея форков и pull requests понятна вам?
- Что вы хотите больше практиковать в работе с ветками?
- Понятна ли вам теперь идея форков и pull request?
- Что из работы с ветками вы хотите попрактиковать больше всего?
- Насколько комфортно вы чувствуете себя, внося вклад в чужой проект?
```mermaid
mindmap
root((Git Collaboration))
Branching
Feature branches
Bug fix branches
Experimental work
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
root((Совместная работа сGit))
Ветвление
Ветви для новых функций
Ветви для исправления ошибок
Экспериментальная работа
Запросы на слияние
Ревью кода
Обсуждение
Тестирование
Лучшие практики
Понятные сообщения коммитов
Небольшие целенаправленные изменения
Хорошая документация
```
> **Уверенность**: Каждый разработчик, которым вы восхищаетесь, когда-то нервничал из-за своего первого pull request. Сообщество GitHub невероятно дружелюбно к новичкам!
> **Укрепление уверенности**: Каждый разработчик, которым вы восхищаетесь, когда-то нервничал из-за своего первого pull request. Сообщество GitHub невероятно приветливо к новичкам!
1. **Откройте PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя в форкнутый репозиторий на GitHub. Вы увидите указание на GitHub, где вас спросят, хотите ли вы создать новый PR, вы нажимаете на это, и вас перенаправляют в интерфейс, где вы можете изменить заголовок сообщения коммита, дать ему более подходящее описание. Теперь мейнтейнер репозитория, который вы форкали, увидит этот PR и _надеемся_ оценит и _объединит_ ваш PR. Теперь вы участник, ура :)
1. **Откройте PR**. Далее вы захотите открыть PR. Для этого перейдите в форкнутый репозиторий на GitHub. Вы увидите уведомление, предлагающее создать новый PR, нажмите на него, и вы попадете в интерфейс, где сможете изменить заголовок сообщения коммита, дать ему более подходящее описание. Теперь мейнтейнер репозитория, который вы форкнули, увидит этот PR и, _надеемся_, оценит и _объединит_ ваш PR. Теперь вы – участник, ура :)
💡 **Современный совет**: Вы также можете создавать PR с помощью GitHub CLI:
```bash
@ -560,53 +557,52 @@ mindmap
git branch -d [branch-name]
```
Затем перейдите на страницу форкнутого репозитория на GitHub и удалите удалённую ветку, которую вы только что туда отправили.
Затем перейдите на страницу форкнутого репозитория на GitHub и удалите удалённую ветку, которую вы только что отправили.
`Pull request` может показаться странным термином, ведь на самом деле вы хотите отправить свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед их слиянием сосновной веткой проекта, так что на самом деле вы запрашиваете решение о внесении изменений у владельца проекта.
`Pull request` может показаться странным термином, ведь на самом деле вы хотите отправить свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед их слиянием с"основной" веткой проекта, так что вы фактически запрашиваете решение о внесении изменений у владельца.
Pull request — это место, где можно сравнить и обсудить изменения, внесённые в ветку, с помощью обзоров, комментариев, интегрированных тестов и других инструментов. Хороший pull request следует примерно тем же правилам, что и сообщение коммита. Вы можете добавить ссылку на задачу в трекере задач, если ваша работа, например, решает эту задачу. Это делается с помощью символа`#`, за которым следует номер вашей задачи. Например, `#97`.
Pull request — это место, где можно сравнить и обсудить изменения, внесённые в ветку, с помощью обзоров, комментариев, интегрированных тестов и других инструментов. Хороший pull request следует примерно тем же правилам, что и сообщение коммита. Вы можете добавить ссылку на задачу в трекере задач, если ваша работа, например, исправляет проблему. Это делается с помощью`#`, за которым следует номер вашей задачи. Например, `#97`.
🤞Держим кулачки, чтобы все проверки прошли успешно и владелец(ы) проекта слили ваши изменения в проект🤞
🤞Держим кулачки, чтобы все проверки прошли успешно и владелец проекта(ов) объединил ваши изменения с проектом🤞
Обновите текущую локальную рабочую ветку, добавив все новые коммиты из соответствующей удалённой ветки на GitHub:
`git pull`
## Вклад в Open Source (Ваш шанс внести свой вклад!)
## Вклад в Open Source (Ваш шанс внести изменения!)
Готовы к чему-то, что вас по-настоящему удивит? 🤯 Давайте поговорим о вкладе в проекты с открытым исходным кодом –у меня мурашки по коже от мыслио том, что я могу поделиться этим с вами!
Готовы к чему-то, что вас абсолютно поразит? 🤯 Давайте поговорим о вкладе в проекты с открытым исходным кодом –у меня мурашки от мысли поделиться этим с вами!
Это ваш шанс стать частью чего-то действительно невероятного. Представьте, что вы улучшаете инструменты, которыми ежедневно пользуются миллионы разработчиков, или исправляете ошибку в приложении, которое любят ваши друзья. Это не просто мечта – это то, что представляет собой вклад в открытый исходный код!
Это ваш шанс стать частью чего-то по-настоящему удивительного. Представьте, что вы улучшаете инструменты, которыми ежедневно пользуются миллионы разработчиков, или исправляете ошибку в приложении, которое любят ваши друзья. Это не просто мечта – это то, что означает вклад в open source!
Вот что вызывает у меня восторг каждый раз, когда я думаю об этом: каждый инструмент, с которым вы учитесь работать – ваш редактор кода, фреймворки, которые мы будем изучать, даже браузер, в котором вы читаете это – начался с того, что кто-то, точно такой же, как вы, сделал свой первый вклад. Тот гениальный разработчик, который создал ваше любимое расширение для VS Code? Когда-то он был новичком, который с дрожащими руками нажимал "создать pull request", как вы собираетесь сделать.
Вот что вызывает у меня восторг каждый раз, когда я думаю об этом: каждый инструмент, с которым вы учитесь работать – ваш редактор кода, фреймворки, которые мы будем изучать, даже браузер, в котором вы читаете это – начался с того, что кто-то, точно такой же, как вы, сделал свой первый вклад. Тот гениальный разработчик, который создал ваше любимое расширение для VS Code? Когда-то он был новичком, нажимая "создать pull request" с дрожащими руками, точно так же, как вы собираетесь сделать.
И вот что самое прекрасное: сообщество open source – это как самый большой групповой объятие в интернете. Большинство проектов активно ищут новичков и имеют задачи с тегом "good first issue", специально предназначенные для таких, как вы! Владельцы проектов искренне радуются, когда видят новых участников, потому что они помнят свои первые шаги.
И вот самая красивая часть: сообщество open source – это как самый большой групповой объятие в интернете. Большинство проектов активно ищут новичков и имеют задачи с тегом "good first issue", специально для таких, как вы! Владельцы проектов искренне радуются, когда видят новых участников, потому что помнят свои первые шаги.
```mermaid
flowchart TD
A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
B --> C[📖 Read Contributing Guidelines]
C --> D[🍴 Fork Repository]
D --> E[💻 Set Up Local Environment]
E --> F[🌿 Create Feature Branch]
F --> G[✨ Make Your Contribution]
G --> H[🧪 Test Your Changes]
H --> I[📝 Write Clear Commit]
I --> J[📤 Push & Create PR]
J --> K[💬 Engage with Feedback]
K --> L[🎉 Merged! You're a Contributor!]
L --> M[🌟 Find Next Issue]
A[🔍 Исследовать GitHub] --> B[🏷️ Найти "good first issue"]
B --> C[📖 Прочитать Руководство по Вкладу]
C --> D[🍴 Форкнуть Репозиторий]
D --> E[💻 Настроить Локальную Среду]
E --> F[🌿 Создать Ветку для Функции]
F --> G[✨ Внести Свой Вклад]
G --> H[🧪 Протестировать Изменения]
H --> I[📝 Написать Понятный Коммит]
I --> J[📤 Запушить и Создать PR]
J --> K[💬 Взаимодействовать с Обратной Связью]
K --> L[🎉 Слияние! Вы Становитесь Контрибьютором!]
L --> M[🌟 Найти Следующую Задачу]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Вы не просто учитесь кодировать – вы готовитесь присоединиться к глобальной семье создателей, которые каждый день думают: "Как мы можем сделать цифровой мир немного лучше?" Добро пожаловать в клуб! 🌟
Вы не просто учитесь программировать – вы готовитесь стать частью глобальной семьи создателей, которые каждый день думают: "Как мы можем сделать цифровой мир немного лучше?" Добро пожаловать в клуб! 🌟
Сначала найдите репозиторий (или **repo**) на GitHub, который вас интересует и в который вы хотите внести изменения. Вам нужно будет скопировать его содержимое на свой компьютер.
Сначала найдите репозиторий (или **репо**) на GitHub, который вас интересует и в который вы хотели бы внести изменения. Вам нужно будет скопировать его содержимое на свой компьютер.
✅ Хороший способ найти репозитории для новичков – [поиск по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
✅ Хороший способ найти репозитории, подходящие для новичков, – [искать по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
- **[GitHub Codespaces](https://github.com/features/codespaces)** - облачная среда разработки GitHub с VS Code в браузере
- **[GitHub Desktop](https://desktop.github.com/)** - графическое приложение для операций с Git
- **[GitHub.dev](https://github.dev)** - нажмите клавишу `.` на любом репозитории GitHub, чтобы открыть VS Code в браузере
- **[GitHub Codespaces](https://github.com/features/codespaces)** – облачная среда разработки GitHub с VS Code в браузере
- **[GitHub Desktop](https://desktop.github.com/)** – графическое приложение для операций с Git
- **[GitHub.dev](https://github.dev)** – нажмите клавишу `.` на любом репозитории GitHub, чтобы открыть VS Code в браузере
- **VS Code**с расширением GitHub Pull Requests
Наконец, вы можете скачать код в виде архива.
### Несколько интересных фактов о GitHub
### Несколько интересных вещейо GitHub
Вы можете ставить звёздочки, следить за обновлениями и "форкать" любой публичный репозиторий на GitHub. Найти свои отмеченные звёздочками репозитории можно в выпадающем меню в правом верхнем углу. Это как закладки, но для кода.
Вы можете поставить звёздочку, подписаться и/или "форкнуть" любой публичный репозиторий на GitHub. Вы найдёте свои отмеченные звёздочкой репозитории в выпадающем меню в правом верхнем углу. Это как закладки, но для кода.
У проектов есть трекер задач, чаще всего на GitHub в разделе "Issues", если не указано иначе, где люди обсуждают вопросы, связанные с проектом. А вкладка Pull Requests – это место, где обсуждаются и проверяются изменения, находящиеся в процессе.
У проектов есть трекер задач, чаще всего на GitHub во вкладке "Issues", если не указано иначе, где люди обсуждают проблемы, связанные с проектом. А вкладка Pull Requests – это место, где обсуждаются и проверяются изменения, которые находятся в процессе.
У проектов также могут быть обсуждения на форумах, в списках рассылки или чатах, таких как Slack, Discord или IRC.
🔧 **Современные функции GitHub**:
- **GitHub Discussions**- Встроенный форум для обсуждений сообщества
- **GitHub Sponsors**- Финансовая поддержка владельцев проектов
- **Вкладка Security** - Отчёты о уязвимостях и рекомендации по безопасности
- **Вкладка Actions** - Автоматизированные рабочие процессы и CI/CD пайплайны
- **Вкладка Insights** - Аналитика о вкладчиках, коммитах и состоянии проекта
- **Вкладка Projects** - Встроенные инструменты управления проектами на GitHub
- **GitHub Discussions**– встроенный форум для обсуждений сообщества
- **GitHub Sponsors**– финансовая поддержка владельцев проектов
- **Вкладка Security** –отчёты о уязвимостях и рекомендации по безопасности
- **Вкладка Actions** –автоматизированные рабочие процессы и CI/CD пайплайны
- **Вкладка Insights** – аналитика о участниках, коммитах и состоянии проекта
- **Вкладка Projects** – встроенные инструменты управления проектами на GitHub
✅ Ознакомьтесь с вашим новым репозиторием на GitHub и попробуйте сделать несколько вещей, например, изменить настройки, добавить информацию в репозиторий, создать проект (например, доску Kanban) и настроить GitHub Actions для автоматизации. Возможностей много!
✅ Осмотритесь в своём новом репозитории на GitHub и попробуйте сделать несколько вещей, например, изменить настройки, добавить информацию в репозиторий, создать проект (например, доску Kanban) и настроить GitHub Actions для автоматизации. Возможностей много!
---
## 🚀 Задание
Ну что, пора проверить ваши новые суперспособности на GitHub! 🚀 Вот задание, которое поможет вам закрепить знания самым увлекательным образом:
Ну что, пора испытать ваши новые суперспособности на GitHub! 🚀 Вот задание, которое поможет вам всё понять и закрепить:
Возьмите друга (или члена семьи, который всегда интересуется, чем вы занимаетесь с компьютером) и отправьтесь в совместное кодинг-приключение! Здесь начинается настоящая магия – создайте проект, пусть ваш друг его форкнет, создайте ветки и объединяйте изменения, как настоящие профессионалы.
Возьмите друга (или того члена семьи, который всегда спрашивает, чем вы занимаетесь с этим "компьютерным делом") и отправьтесь в совместное кодовое приключение! Здесь начинается настоящая магия – создайте проект, пусть ваш друг его форкнет, создайте несколько веток и объедините изменения, как настоящие профессионалы.
Не буду скрывать – вы, вероятно, будете смеяться (особенно когда оба попробуете изменить одну и ту же строку), возможно, немного запутаетесь, но обязательно испытаете те удивительные моменты "ага!", которые делают весь процесс обучения стоящим. А ещё есть что-то особенное в том, чтобы разделить первый успешный merge с кем-то – это как маленький праздник ваших достижений!
Не буду скрывать – вы, скорее всего, будете смеяться (особенно когда оба попробуете изменить одну и ту же строку), возможно, немного запутаетесь, но обязательно испытаете те удивительные моменты "ага!", которые делают весь процесс обучения стоящим. А ещё есть что-то особенное в том, чтобы разделить первый успешный merge с кем-то – это как маленький праздник того, как далеко вы продвинулись!
Пока у вас нет напарника? Не переживайте! Сообщество GitHub полно невероятно дружелюбных людей, которые помнят, каково это быть новичком. Ищите репозитории с меткой "good first issue" – это как приглашение: "Эй, новички, давайте учиться вместе!" Как это круто?
Ещё нет кодового друга? Не переживайте! Сообщество GitHub полно невероятно дружелюбных людей, которые помнят, каково это быть новичком. Ищите репозитории с меткой "good first issue" – это как приглашение: "Эй, новички, приходите учиться с нами!" Как это круто?
## Викторина после лекции
[Викторина после лекции](https://ff-quizzes.netlify.app/web/en/)
## Обзор и продолжение обучения
Ух ты! 🎉 Посмотрите на себя – вы только что освоили основы GitHub, как настоящий чемпион! Если ваш мозг сейчас немного перегружен, это абсолютно нормально и даже хороший знак. Вы только что изучили инструменты, которые мне потребовалось несколько недель, чтобы освоить, когда я начинал.
Ух ты! 🎉 Посмотрите на себя – вы только что освоили основы GitHub, как настоящий чемпион! Если ваш мозг сейчас немного перегружен, это абсолютно нормально и даже хороший знак. Вы только что узнали инструменты, на освоение которых у меня ушли недели, когда я начинал.
Git и GitHub невероятно мощные (серьёзно мощные), и каждый разработчик, которого я знаю – включая тех, кто сейчас кажется волшебниками– должен был практиковаться и немного путаться, прежде чем всё стало понятно. То, что вы прошли этот урок, означает, что вы уже на пути к освоению одних из самых важных инструментов в арсенале разработчика.
Git и GitHub невероятно мощные (серьёзно мощные), и каждый разработчик, которого я знаю – включая тех, кто сейчас кажется волшебником– должен был практиковаться и немного путаться, прежде чем всё стало понятно. Тот факт, что вы прошли этот урок, означает, что вы уже на пути к освоению одних из самых важных инструментов в арсенале разработчика.
Вот несколько отличных ресурсов, которые помогут вам практиковаться и стать ещё круче:
- [Руководство по внесению вклада в проекты с открытым исходным кодом](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) –Ваш путеводитель к тому, чтобы изменить мир
- [Шпаргалка по Git](https://training.github.com/downloads/github-git-cheat-sheet/) –Держите её под рукой для быстрого доступа!
- [Руководство по внесению вклада в open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – ваш путеводитель к тому, чтобы изменить мир
- [Шпаргалка по Git](https://training.github.com/downloads/github-git-cheat-sheet/) –держите её под рукой для быстрого доступа!
И помните: практика делает прогресс, а не совершенство! Чем больше вы используете Git и GitHub, тем естественнее это становится. GitHub создал потрясающие интерактивные курсы, которые позволяют вам практиковаться в безопасной среде:
И помните: практика делает прогресс, а не совершенство! Чем больше вы используете Git и GitHub, тем естественнее это становится. GitHub создал несколько потрясающих интерактивных курсов, которые позволяют вам практиковаться в безопасной среде:
- [Введение в GitHub](https://github.com/skills/introduction-to-github)
- [Общение с использованием Markdown](https://github.com/skills/communicate-using-markdown)
**Хотите приключений? Ознакомьтесь с этими современными инструментами:**
- [Документация GitHub CLI](https://cli.github.com/manual/) –Для тех, кто хочет почувствовать себя мастером командной строки
- [Документация GitHub Codespaces](https://docs.github.com/en/codespaces) –Кодируйте в облаке!
- [Документация GitHub Actions](https://docs.github.com/en/actions) –Автоматизируйте всё
- [Лучшие практики работы сGit](https://www.atlassian.com/git/tutorials/comparing-workflows) –Повышайте уровень своего рабочего процесса
**Чувствуете себя авантюристом? Ознакомьтесь с этими современными инструментами:**
- [Документация GitHub CLI](https://cli.github.com/manual/) –для тех, кто хочет почувствовать себя мастером командной строки
- [Документация GitHub Codespaces](https://docs.github.com/en/codespaces) –кодируйте в облаке!
- [Документация GitHub Actions](https://docs.github.com/en/actions) –автоматизируйте всё
- [Лучшие практики Git](https://www.atlassian.com/git/tutorials/comparing-workflows) –улучшите свой рабочий процесс
## Вызов GitHub Copilot Agent 🚀
## Задание с GitHub Copilot Agent 🚀
Используйте режим Agent, чтобы выполнить следующее задание:
**Описание:** Создайте совместный проект веб-разработки, который демонстрирует полный рабочий процесс GitHub, изученный в этом уроке. Это задание поможет вам практиковаться в создании репозиториев, использовании функций для совместной работы и современных рабочих процессах Git в реальной ситуации.
**Описание:** Создайте совместный проект веб-разработки, который демонстрирует полный рабочий процесс GitHub, изученный в этом уроке. Это задание поможет вам попрактиковаться в создании репозиториев, функциях совместной работы и современных рабочих процессах Git в реальном сценарии.
**Задание:** Создайте новый публичный репозиторий GitHub для простого проекта "Ресурсы веб-разработки". Репозиторий должен включать хорошо структурированный файл README.md, содержащий полезные инструменты и ресурсы для веб-разработки, организованные по категориям (HTML, CSS, JavaScript и т.д.). Настройте репозиторий с соблюдением стандартов сообщества, включая лицензию, рекомендации по внесению вклада и кодекс поведения. Создайте как минимум две ветки для функций: одну для добавления ресурсов CSS и другую для ресурсов JavaScript. Сделайте коммиты в каждую ветку с описательными сообщениями коммитов, затем создайте pull requests для слияния изменений обратно в основную ветку. Включите функции GitHub, такие как Issues, Discussions, и настройте базовый рабочий процесс GitHub Actions для автоматических проверок.
**Задание:** Создайте новый публичный репозиторий GitHub для простого проекта "Ресурсы веб-разработки". Репозиторий должен включать хорошо структурированный файл README.md, перечисляющий полезные инструменты и ресурсы для веб-разработки, организованные по категориям (HTML, CSS, JavaScript и т.д.). Настройте репозиторий с соблюдением стандартов сообщества, включая лицензию, рекомендации по внесению вклада и кодекс поведения. Создайте как минимум две ветки для функций: одну для добавления ресурсов CSS и другую для ресурсов JavaScript. Сделайте коммиты в каждую ветку с описательными сообщениями коммитов, затем создайте pull requests для слияния изменений обратно в main. Включите функции GitHub, такие как Issues, Discussions, и настройте базовый рабочий процесс GitHub Actions для автоматических проверок.
## Задание
Ваша миссия, если вы решите её принять: Пройдите курс [Введение в GitHub](https://github.com/skills/introduction-to-github) на GitHub Skills. Этот интерактивный курс позволит вам практиковаться во всём, что вы узнали, в безопасной, управляемой среде. А ещё вы получите классный значок, когда закончите! 🏅
Ваша миссия, если вы решите её принять: Пройдите курс [Введение в GitHub](https://github.com/skills/introduction-to-github) на GitHub Skills. Этот интерактивный курс позволит вам попрактиковаться во всём, что вы узнали, в безопасной, управляемой среде. А ещё вы получите классный значок, когда закончите! 🏅
**Готовы к новым вызовам?**
- Настройте SSH-аутентификацию для вашего аккаунта GitHub (больше никаких паролей!)
- Настройте SSH-аутентификацию для своей учётной записи GitHub (больше никаких паролей!)
- Попробуйте использовать GitHub CLI для ежедневных операций с Git
- Создайте репозиторий с рабочим процессом GitHub Actions
- Исследуйте GitHub Codespaces, открыв этот самый репозиторий в облачном редакторе
---
## 🚀 Ваш путь к мастерству на GitHub
## 🚀 Ваш таймлайн освоения GitHub
### ⚡ **Что можно сделать за следующие 5 минут**
- [ ] Отметьте звёздочкой этот репозиторий и ещё 3 проекта, которые вас интересуют
- [ ] Настройте двухфакторную аутентификацию для вашего аккаунта GitHub
- [ ] Создайте простой README для вашего первого репозитория
### ⚡ **Что вы можете сделать за следующие 5 минут**
- [ ] Поставьте звёздочку этому репозиторию и ещё 3 проектам, которые вас интересуют
- [ ] Настройте двухфакторную аутентификацию для своей учётной записи GitHub
- [ ] Создайте простой README для своего первого репозитория
- [ ] Подпишитесь на 5 разработчиков, чья работа вас вдохновляет
### 🎯 **Что можно достичь за час**
### 🎯 **Что вы можете достичь за час**
- [ ] Пройдите викторину после урока и подумайте о своём пути на GitHub
- [ ] Настройте SSH-ключи для аутентификации на GitHub без пароля
- [ ] Сделайте свой первый значимый коммит с отличным сообщением
- [ ] Исследуйте вкладку "Explore" на GitHub, чтобы найти интересные проекты
- [ ] Настройте SSH-ключи для аутентификации на GitHub без паролей
- [ ] Сделайте свой первый значимый коммит с отличным сообщением коммита
- [ ] Исследуйте вкладку "Explore" на GitHub, чтобы найти популярные проекты
- [ ] Попрактикуйтесь в форке репозитория и внесении небольших изменений
### 📅 **Ваше недельное приключение на GitHub**
### 📅 **Ваш недельный GitHub-приключение**
- [ ] Пройдите курсы GitHub Skills (Введение в GitHub, Markdown)
- [ ] Сделайте свой первый pull request в проект с открытым исходным кодом
- [ ] Настройте сайт GitHub Pages, чтобы показать свои работы
- [ ] Присоединитесь к обсуждениям на GitHub по интересующим вас проектам
- [ ] Создайте репозиторий с соблюдением стандартов сообщества (README, лицензия и т.д.)
- [ ] Попробуйте GitHub Codespaces для разработки в облаке
- [ ] Настройте сайт GitHub Pages, чтобы показать свою работу
- [ ] Присоединитесь к обсуждениям на GitHub в интересующих вас проектах
- [ ] Создайте репозиторий с соблюдением стандартов сообщества (README, Лицензия и т.д.)
- [ ] Попробуйте GitHub Codespaces для облачной разработки
### 🌟 **Ваше месячное преобразование**
### 🌟 **Ваш месячный путь трансформации**
- [ ] Внесите вклад в 3 разных проекта с открытым исходным кодом
- [ ] Станьте наставником для новичка на GitHub (передайте свои знания!)
- [ ] Настройте автоматизированные рабочие процессы спомощью GitHub Actions
- [ ] Наставьте кого-то нового на GitHub (передайте знания!)
- [ ] Настройте автоматизированные рабочие процессы с GitHub Actions
- [ ] Создайте портфолио, демонстрирующее ваши вклады на GitHub
- [ ] Участвуйте в Hacktoberfest или подобных мероприятиях сообщества
- [ ] Станьте владельцем собственного проекта, в который будут вносить вклад другие
- [ ] Станьте владельцем собственного проекта, в который другие будут вносить вклад
### 🎓 **Итоговая проверка вашего мастерства на GitHub**
### 🎓 **Итоговая проверка освоения GitHub**
**Отпразднуйте свои достижения:**
**Отпразднуйте, как далеко вы продвинулись:**
- Что вам больше всего нравится в использовании GitHub?
- Какая функция для совместной работы вас больше всего вдохновляет?
- Насколько уверенно вы чувствуете себя в вопросах вклада в open source?
- Какой проект вы хотите поддержать в первую очередь?
- Какая функция совместной работы вас больше всего вдохновляет?
- Насколько уверенно вы чувствуете себя в отношении вклада в open source?
- Какой первый проект вы хотите поддержать?
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Ваш путь уверенности в GitHub
section Сегодня
Нервный: 3: Вы
Любопытный: 4: Вы
Взволнованный: 5: Вы
section На этой неделе
Практикуетесь: 4: Вы
Вносите вклад: 5: Вы
Устанавливаете связи: 5: Вы
section В следующем месяце
Сотрудничаете: 5: Вы
Руководите: 5: Вы
Вдохновляете других: 5: Вы
```
> 🌍 **Добро пожаловать в глобальное сообщество разработчиков!** Теперь у вас есть инструменты для сотрудничества с миллионами разработчиков по всему миру. Ваш первый вклад может показаться небольшим, но помните – каждый крупный проект с открытым исходным кодом начался с того, что кто-то сделал свой первый коммит. Вопрос не в том, окажете ли вы влияние, а в том, какой удивительный проект первым получит выгоду от вашего уникального взгляда! 🚀
Помните: каждый эксперт когда-то был новичком. У вас всё получится! 💪
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Улучшите свои навыки и оптимизируйте запоминание знаний благодаря эффективной методике обучения на основе проектов. Начните свой путь в программировании уже сегодня!
Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Улучшите свои навыки и оптимизируйте запоминание знаний благодаря эффективной проектной методике обучения. Начните свой путь в программировании уже сегодня!
Присоединяйтесь к сообществу Azure AI Foundry в Discord
Присоединяйтесь к сообществу Azure AI Foundry Discord
[](https://discord.com/invite/ByRwuEEgH4)
**Если вы хотите добавить дополнительные переводы, поддерживаемые языки перечислены [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Если вы хотите добавить поддержку дополнительных языков, список доступных языков можно найти [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Вы студент?_
#### 🧑🎓 _Вы студент?_
Посетите [**Студенческую страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный сертификат. Это страница, которую стоит добавить в закладки и проверять время от времени, так как мы ежемесячно обновляем контент.
Посетите [**страницу для студентов**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный сертификат. Это страница, которую стоит добавить в закладки и проверять время от времени, так как мы ежемесячно обновляем контент.
### 📣 Объявление - Новые задания с режимом GitHub Copilot Agent!
### 📣 Объявление - Новые задания с режимом GitHub Copilot Agent!
Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание, которое вы можете выполнить, используя GitHub Copilot и режим Agent. Если вы еще не использовали режим Agent, он способен не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое.
Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание для выполнения с использованием GitHub Copilot и режима Agent. Если вы еще не использовали режим Agent, он способен не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое.
### 📣 Объявление - _Новый проект с использованием генеративного ИИ_
### 📣 Объявление - _Новый проект с использованием генеративного ИИ_
Только что добавлен новый проект "AI Assistant", ознакомьтесь с ним [проект](./09-chat-project/README.md)
Только что добавлен новый проект AI Assistant, ознакомьтесь с ним [проект](./09-chat-project/README.md)
### 📣 Объявление - _Новый учебный курс_ по генеративному ИИ для JavaScript
### 📣 Объявление - _Новый учебный курс_ по генеративному ИИ для JavaScript
Не пропустите наш новый учебный курс по генеративному ИИ!
Не пропустите наш новый учебный курс по генеративному ИИ!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
Каждый урок включает задание для выполнения, проверку знаний и вызов, чтобы помочь вам изучить такие темы, как:
- Создание запросов и инженерия запросов
- Генерация текстовых и графических приложений
- Приложения для поиска
Каждый урок включает задание для выполнения, проверку знаний и вызов, чтобы помочь вам изучить такие темы, как:
- Создание запросов и инженерия запросов
- Генерация текстовых и графических приложений
- Приложения для поиска
Посетите [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), чтобы начать!
Посетите [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), чтобы начать!
## 🌱 Начало работы
> **Учителя**, мы [включили несколько предложений](for-teachers.md) о том, как использовать этот учебный курс. Мы будем рады вашему отзыву [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
## 🌱 Начало работы
**[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины, затем изучите материалы лекции, выполните различные задания и проверьте свои знания с помощью викторины после лекции.
> **Учителя**, мы [включили несколько предложений](for-teachers.md) о том, как использовать этот учебный курс. Мы будем рады вашим отзывам [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Чтобы улучшить процесс обучения, общайтесь с другими учениками, чтобы работать над проектами вместе! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов будет готова ответить на ваши вопросы.
**[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины и продолжайте изучение материала лекции, выполняя различные задания и проверяя свои знания с помощью викторины после лекции.
Для дальнейшего обучения мы настоятельно рекомендуем изучить [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для получения дополнительных учебных материалов.
Чтобы улучшить ваш учебный опыт, общайтесь с коллегами, чтобы работать над проектами вместе! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов будет готова ответить на ваши вопросы.
### 📋 Настройка вашей среды
Для дальнейшего обучения мы настоятельно рекомендуем изучить [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для получения дополнительных учебных материалов.
Этот учебный курс уже готов к разработке! Вы можете выбрать запуск курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда, не требующая установки_), или локально на вашем компьютере с использованием текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
### 📋 Настройка вашей среды
#### Создайте свой репозиторий
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебного курса.
Этот учебный курс имеет готовую среду разработки! Когда вы начнете, вы можете выбрать запуск учебного курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда, не требующая установки_), или локально на вашем компьютере, используя текстовый редактор, такой как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Следуйте этим шагам:
1. **Сделайте форк репозитория**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебного курса.
#### Запуск учебного курса в Codespace
Следуйте этим шагам:
1. **Сделайте форк репозитория**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
#### Запуск учебного курса локально на вашем компьютере
Чтобы запустить этот учебный курс локально на вашем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../1-getting-started-lessons/1-intro-to-programming-languages), проведет вас через различные варианты для каждого из этих инструментов, чтобы вы могли выбрать то, что лучше всего подходит для вас.
#### Запуск учебного курса локально на вашем компьютере
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, который также имеет встроенный [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Вы можете скачать Visual Studio Code [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Чтобы запустить этот учебный курс локально на вашем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../1-getting-started-lessons/1-intro-to-programming-languages), проведет вас через различные варианты для каждого из этих инструментов, чтобы вы могли выбрать то, что лучше всего подходит для вас.
1. Клонируйте ваш репозиторий на компьютер. Вы можете сделать это, нажав кнопку **Code** и скопировав URL:
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, который также имеет встроенный [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Вы можете скачать Visual Studio Code [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
[CodeSpace](./images/createcodespace.png)
1. Клонируйте ваш репозиторий на ваш компьютер. Вы можете сделать это, нажав кнопку **Code** и скопировав URL:
[CodeSpace](./images/createcodespace.png)
Затем откройте [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и выполните следующую команду, заменив `<your-repository-url>` на URL, который вы только что скопировали:
Затем откройте [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и выполните следующую команду, заменив `<your-repository-url>` на URL, который вы только что скопировали:
```bash
git clone <your-repository-url>
```
2. Откройте папку в Visual Studio Code. Вы можете сделать это, нажав **File** > **Open Folder** и выбрав папку, которую вы только что клонировали.
2. Откройте папку в Visual Studio Code. Вы можете сделать это, нажав **File** > **Open Folder** и выбрав папку, которую вы только что клонировали.
> Рекомендуемые расширения для Visual Studio Code:
>
> Рекомендуемые расширения для Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для предварительного просмотра HTML-страниц в Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - для ускорения написания кода
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - помогает писать код быстрее
## 📂 Каждый урок включает:
- необязательный скетчноут
- необязательное дополнительное видео
- разминка-тест перед уроком
- письменный материал урока
- пошаговые инструкции для проектных уроков по созданию проекта
- проверка знаний
- задание
- дополнительное чтение
- [тест после урока](https://ff-quizzes.netlify.app/web/)
- необязательный скетчноут
- необязательное дополнительное видео
- разминка-тест перед уроком
- письменный урок
- для проектных уроков — пошаговые инструкции по созданию проекта
- проверка знаний
- задание-челлендж
- дополнительное чтение
- домашнее задание
- [тест после урока](https://ff-quizzes.netlify.app/web/)
> **Примечание о тестах**: Все тесты находятся в папке Quiz-app, всего 48 тестов по три вопроса в каждом. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение для тестов можно запустить локально или развернуть на Azure; следуйте инструкциям в папке `quiz-app`.
> **Примечание о тестах**: Все тесты находятся в папке Quiz-app, всего 48 тестов по три вопроса каждый. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение для тестов можно запустить локально или развернуть в Azure; следуйте инструкциям в папке `quiz-app`.
## 🗃️ Уроки
| | Название проекта | Изучаемые концепции | Цели обучения | Ссылка на урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты разработчика | Узнайте основные принципы большинства языков программирования и опрограммном обеспечении, которое помогает профессиональным разработчикам выполнять свою работу | [Введение в языки программирования и инструменты разработчика](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими разработчиками набазекода | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнайте основы доступности веб-сайтов | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Узнайте о функциях и методах для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | Основы JS | Принятие решений с помощью JS | Узнайте, как создавать условия в вашем коде, используя методы принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными с использованием массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | Практика HTML | Создайте HTML для онлайн-террариума, сосредоточив внимание на создании макета | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | Практика CSS | Создайте CSS для стилизации онлайн-террариума, сосредоточив внимание на основах CSS, включая адаптивный дизайн | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания в JavaScript, манипуляция DOM | Создайте JavaScript для работы террариума в качестве интерфейса перетаскивания, сосредоточив внимание на замыканиях и манипуляции DOM | [Замыкания в JavaScript, манипуляция DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра на скорость печати](./4-typing-game/solution/README.md) | Создание игры на скорость печати | Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения | [Программирование, управляемое событиями](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнайте, как работают браузеры, их историю и как создать первые элементы расширения для браузера | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Создание формы, вызов API и сохранение переменных в локальном хранилище | Создайте элементы 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 API, который используется для рисования элементов на экране | [Рисование на холсте](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космическая игра](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться, используя декартовы координаты и Canvas API | [Перемещение элементов](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космическая игра](./6-space-game/solution/README.md) | Обнаружение столкновений | Заставьте элементы сталкиваться и реагировать друг на друга, используя нажатия клавиш, и добавьте функцию задержки для обеспечения производительности игры | [Обнаружение столкновений](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космическая игра](./6-space-game/solution/README.md) | Подсчет очков | Выполняйте математические вычисления на основе состояния игры и производительности | [Подсчет очков](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космическая игра](./6-space-game/solution/README.md) | Завершение и перезапуск игры | Узнайте о завершении и перезапуске игры, включая очистку ресурсов и сброс значений переменных | [Условие завершения](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банковское приложение](./7-bank-project/solution/README.md) | HTML-шаблоны и маршруты в веб-приложении | Узнайте, как создать каркас архитектуры многостраничного веб-сайта, используя маршрутизацию и HTML-шаблоны | [HTML-шаблоны и маршруты](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банковское приложение](./7-bank-project/solution/README.md) | Создание формы входа и регистрации | Узнайте о создании форм и обработке процедур проверки | [Формы](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банковское приложение](./7-bank-project/solution/README.md) | Методы получения и использования данных | Как данные поступают в ваше приложение, как их получать, сохранять и удалять | [Данные](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банковское приложение](./7-bank-project/solution/README.md) | Концепции управления состоянием | Узнайте, как ваше приложение сохраняет состояние и как управлять им программно | [Управление состоянием](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Редактор кода Browser/VScode](../../8-code-editor) | Работа с VScode | Узнайте, как использовать редактор кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| | Название проекта | Изучаемые концепции | Учебные цели | Ссылка на урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты разработчика | Узнайте основные принципы большинства языков программирования и оПО, которое помогает профессиональным разработчикам в работе | [Введение в языки программирования и инструменты разработчика](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в проекте, как сотрудничать с другими разработчиками | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнайте основы доступности веб-сайтов | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Узнайте о функциях и методах для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | Основы JS | Принятие решений с помощью JS | Узнайте, как создавать условия в коде с использованием методов принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными с использованием массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | HTML на практике | Создайте HTML для онлайн-террариума, сосредоточившись на создании макета | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | CSS на практике | Создайте CSS для стилизации онлайн-террариума, сосредоточившись на основах CSS, включая адаптивность страницы | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания в JavaScript, работа с DOM | Напишите JavaScript для террариума, чтобы он работал как интерфейс drag/drop, сосредоточившись на замыканиях и манипуляции 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 |
| 25 | [Редактор кода для браузера/VScode](../../8-code-editor) | Работа с VScode | Узнайте, как использовать редактор кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Ассистенты](./9-chat-project/README.md) | Работа с AI | Узнайте, как создать собственного AI-ассистента | [Проект AI-ассистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогика
Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
* обучение на основе проектов
* частые тесты
Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
* обучение на основе проектов
* частые тесты
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. Студенты получат возможность практического опыта, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
> 🎓 Вы можете пройти первые несколько уроков этой программы как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. Учащиеся получат возможность приобрести практический опыт, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочные знания в области веб-разработки.
Обеспечивая соответствие содержания проектам, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также написали несколько вводных уроков по основам JavaScript для знакомства с концепциями, сопровождаемых видео из коллекции "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", некоторые из авторов которой внесли вклад в эту учебную программу.
> 🎓 Вы можете пройти первые несколько уроков этой программы в формате [Учебного пути](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Кроме того, низкоуровневый тест перед занятием настраивает студента на изучение темы, а второй тест после занятия обеспечивает дальнейшее усвоение материала. Эта учебная программа была разработана как гибкая и увлекательная, и ее можно пройти полностью или частично. Проекты начинаются с простых и становятся все более сложными к концу 12-недельного цикла.
Обеспечивая соответствие содержания учебной программы проектам, процесс обучения становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также подготовили несколько вводных уроков по основам JavaScript для знакомства с концепциями, сопровождаемых видео из коллекции "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" с участием некоторых авторов этой программы.
Хотя мы намеренно избегали введения фреймворков JavaScript, чтобы сосредоточиться на базовых навыках, необходимых веб-разработчику перед освоением фреймворка, хорошим следующим шагом после завершения этой программы будет изучение Node.js через другую коллекцию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Кроме того, тест с низкими ставками перед уроком настраивает студента на изучение темы, а второй тест после урока обеспечивает лучшее усвоение материала. Эта учебная программа была разработана как гибкая и увлекательная, и ее можно пройти полностью или частично. Проекты начинаются с простых и становятся все более сложными к концу 12-недельного цикла.
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Руководством по внесению изменений](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
Хотя мы намеренно избегали введения фреймворков 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). Мы будем рады вашим конструктивным отзывам!
## 🧭 Оффлайн-доступ
## 🧭 Доступ оффлайн
Вы можете запустить эту документацию оффлайн, используя [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем локальном компьютере, а затем в корневой папке этого репозитория введите `docsify serve`. Веб-сайт будет доступен на порту 3000 вашего локального хоста: `localhost:3000`.
Вы можете запустить эту документацию оффлайн, используя [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем локальном компьютере, а затем в корневой папке этого репозитория введите `docsify serve`. Веб-сайт будет доступен на порту 3000 вашего локального хоста: `localhost:3000`.
## 📘 PDF
## 📘 PDF
PDF всехуроков можно найти [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF всех уроков можно найти [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Другие курсы
## 🎒 Другие курсы
Наша команда создает и другие курсы! Ознакомьтесь:
Наша команда создает и другие курсы! Ознакомьтесь:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -223,7 +224,7 @@ PDF всех уроков можно найти [здесь](https://microsoft.g
### Основное обучение
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
@ -240,19 +241,21 @@ PDF всех уроков можно найти [здесь](https://microsoft.g
## Получение помощи
Если вы столкнулись с трудностями или у вас есть вопросы о создании приложений на основе ИИ, присоединяйтесь:
Если вы столкнулись с трудностями или у вас есть вопросы о создании приложений с ИИ, присоединяйтесь к обсуждениям с другими учащимися и опытными разработчиками о MCP. Это поддерживающее сообщество, где приветствуются вопросы и свободно делятся знаниями.
[](https://aka.ms/foundry/discord)
Если у вас есть отзывы о продукте или ошибки при разработке, посетите:
[](https://aka.ms/foundry/forum)
Этот репозиторий лицензирован в соответствии с лицензией MIT. Подробнее см. в файле [LICENSE](../../LICENSE).
Этот репозиторий лицензирован под лицензией MIT. Подробнее смотрите в файле [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования этого перевода.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat
Microsoft Cloud Advocates tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, teraryumlar, tarayıcıuzantıları ve uzay oyunları gibi uygulamalı projeler aracılığıyla JavaScript, CSS ve HTML konularına dalış yapar. Testler, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Becerilerinizi geliştirin ve etkili proje tabanlı pedagojimizle bilgi birikiminizi optimize edin. Kodlama yolculuğunuza bugün başlayın!
Microsoft Cloud Advocates tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, teraryumlar, tarayıcıeklentileri ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML konularına dalıyor. Quizler, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Proje tabanlı etkili öğretim yöntemimizle becerilerinizi geliştirin ve bilgilerinizi pekiştirin. Kodlama yolculuğunuza bugün başlayın!
Azure AI Foundry Discord Topluluğuna Katılın
[](https://discord.com/invite/ByRwuEEgH4)
**Ek dil çevirileri istiyorsanız, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir.**
**Ek çeviri dillerinin desteklenmesini istiyorsanız, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir.**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Öğrenci misiniz?_
[**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin, burada başlangıç kaynakları, öğrenci paketleri ve hatta ücretsiz sertifika kuponu alma yollarını bulabilirsiniz. Bu sayfayı yer imlerine ekleyin ve içeriği aylık olarak değiştirdiğimiz için zaman zaman kontrol edin.
[**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Burada başlangıç kaynakları, öğrenci paketleri ve hatta ücretsiz sertifika kuponu alma yollarını bulabilirsiniz. Bu sayfayı yer imlerinize ekleyin ve içeriği aylık olarak değiştirdiğimiz için zaman zaman kontrol edin.
### 📣 Duyuru - Tamamlanacak Yeni GitHub Copilot Agent modu zorlukları!
### 📣 Duyuru - Yeni GitHub Copilot Agent modu zorlukları tamamlanabilir!
Yeni bir zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" başlığını arayın. Bu, GitHub Copilot ve Agent modunu kullanarak tamamlamanız gereken yeni bir zorluk. Daha önce Agent modunu kullanmadıysanız, bu mod yalnızca metin oluşturmakla kalmaz, aynı zamanda dosyalar oluşturabilir ve düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
Yeni bir zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" başlığını arayın. Bu, GitHub Copilot ve Agent modunu kullanarak tamamlamanız gereken yeni bir zorluk. Daha önce Agent modunu kullanmadıysanız, yalnızca metin oluşturmakla kalmaz, aynı zamanda dosyalar oluşturabilir ve düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
Her ders, tamamlanacak bir ödev, bilgi kontrolü ve aşağıdaki gibi konuları öğrenmenize rehberlik edecek bir zorluk içerir:
- İstek oluşturma ve istek mühendisliği
- Metin ve görüntü uygulaması oluşturma
Her ders, tamamlamanız gereken bir ödev, bir bilgi kontrolü ve aşağıdaki konuları öğrenmenize rehberlik edecek bir zorluk içerir:
- Prompting ve prompt mühendisliği
- Metin ve görsel uygulama oluşturma
- Arama uygulamaları
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
## 🌱 Başlarken
> **Öğretmenler**, bu müfredatı nasıl kullanabileceğinizle ilgili [bazı öneriler](for-teachers.md) ekledik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) paylaşmanızı çok isteriz!
> **Öğretmenler**, bu müfredatı nasıl kullanacağınızla ilgili [bazı öneriler ekledik](for-teachers.md). Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) duymak isteriz!
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön ders testiyle başlayın ve ders materyalini okuyarak, çeşitli etkinlikleri tamamlayarak ve ders sonrası testiyle anlayışınızı kontrol ederek devam edin.
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön ders sınavıyla başlayın ve ardından ders materyalini okuyarak, çeşitli etkinlikleri tamamlayarak ve ders sonrası sınavla bilginizi kontrol ederek devam edin.
Öğrenme deneyiminizi geliştirmek için projeler üzerinde birlikte çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalar, [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir, burada moderatör ekibimiz sorularınızı yanıtlamak için hazır olacaktır.
Öğrenme deneyiminizi geliştirmek için projeler üzerinde birlikte çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalar, [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilmektedir ve moderatör ekibimiz sorularınızı yanıtlamak için hazır olacaktır.
Eğitiminizi ilerletmek için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) adresindeki ek çalışma materyallerini keşfetmenizi şiddetle tavsiye ederiz.
Eğitiminizi daha da ileriye taşımak için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platformunda ek çalışma materyallerini keşfetmenizi şiddetle tavsiye ederiz.
### 📋 Ortamınızı Ayarlama
Bu müfredat, kullanıma hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) veya bilgisayarınızda yerel olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin editörü kullanarak çalıştırmayı seçebilirsiniz.
Bu müfredat, kullanıma hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatıbir [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) içinde veya bilgisayarınızda bir metin düzenleyici kullanarak yerel olarak çalıştırmayı seçebilirsiniz, örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Depo Oluşturun
Çalışmanızı kolayca kaydedebilmeniz için bu depodan kendi kopyanızı oluşturmanız önerilir. Bunu, sayfanın üst kısmındaki **Bu şablonu kullan** düğmesine tıklayarak yapabilirsiniz. Bu, GitHub hesabınızda müfredatın bir kopyasıyla yeni bir depo oluşturacaktır.
Çalışmanızı kolayca kaydedebilmeniz için bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu, sayfanın üst kısmındaki **Bu şablonu kullan** düğmesine tıklayarak yapabilirsiniz. Bu, GitHub hesabınızda müfredatın bir kopyasıyla yeni bir depo oluşturacaktır.
Adımları izleyin:
Şu adımları izleyin:
1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" düğmesine tıklayın.
@ -106,30 +108,30 @@ Oluşturduğunuz bu deponun kopyasında, **Kod** düğmesine tıklayın ve **Cod
#### Müfredatı Bilgisayarınızda Yerel Olarak Çalıştırma
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörüne, bir tarayıcıya ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçların her biri için size en uygun olanı seçmenize yardımcı olacak çeşitli seçenekleri gösterecektir.
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin düzenleyiciye, bir tarayıcıya ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçların her biri için çeşitli seçenekleri gözden geçirerek size en uygun olanı seçmenize yardımcı olacaktır.
Önerimiz, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır, bu editör aynı zamanda yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) içerir. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
Önerimiz, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır. Bu düzenleyici, aynı zamanda yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) içerir. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içindeki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) uygulamasını açın ve az önce kopyaladığınız URL'yi `<your-repository-url>` ile değiştirerek aşağıdaki komutu çalıştırın:
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içindeki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) açın ve aşağıdaki komutu çalıştırın. `<your-repository-url>` yerine az önce kopyaladığınız URL'yi yazın:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code'da klasörü açın. Bunu, **Dosya** > **Klasör Aç** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz.
2. Klasörü Visual Studio Code'da açın. Bunu, **Dosya** > **Klasör Aç** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz.
> Önerilen Visual Studio Code uzantıları:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarını önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - Kod yazma hızınızı artırmak için
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML sayfalarınıVisual Studio Code içinde önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazma hızınızı artırmak için
## 📂 Her ders şunları içerir:
- isteğe bağlı çizim notu
- isteğe bağlı çizim notları
- isteğe bağlı ek video
- ders öncesi ısınma testi
- yazılı ders
@ -140,119 +142,122 @@ Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin e
- ödev
- [ders sonrası test](https://ff-quizzes.netlify.app/web/)
> **Testler hakkında bir not**: Tüm testler Quiz-app klasöründe yer alır, toplamda 48 test ve her biri üç sorudan oluşur. Testler [burada](https://ff-quizzes.netlify.app/web/) mevcuttur. Test uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; `quiz-app` klasöründeki talimatlarıtakip edin.
> **Testler hakkında bir not**: Tüm testler Quiz-app klasöründe yer alır, her biri üç sorudan oluşan toplam 48 test vardır. Testlere [buradan](https://ff-quizzes.netlify.app/web/) ulaşabilirsiniz. Test uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; `quiz-app` klasöründeki talimatlarıizleyin.
## 🗃️ Dersler
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
| 01 | Başlangıç | Programlamaya Giriş ve Kullanılan Araçlar | Çoğu programlama dilinin temel prensiplerini ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımları öğrenin | [Programlama Dillerine ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlangıç | GitHub Temelleri, ekip çalışması dahil | Projenizde GitHub'ı nasıl kullanacağınızı, bir kod tabanında başkalarıyla nasıl iş birliği yapacağınızı öğrenin | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlangıç | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temellerini öğrenin | [Veri Türleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 01 | Başlarken | Programlamaya Giriş ve Kullanılan Araçlar | Çoğu programlama dilinin temel prensiplerini ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımları öğrenin | [Programlama Dillerine ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip çalışması dahil | Projenizde GitHub'ı nasıl kullanacağınızı, bir kod tabanında başkalarıyla nasıl iş birliği yapacağınızı öğrenin | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temelleri | [Veri Türleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Bir uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinin | [Fonksiyonlar ve Metotlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda karar verme yöntemlerini kullanarak koşullar oluşturmayı öğrenin | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngüler kullanarak verilerle çalışın | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulamada | Çevrimiçi bir teraryum oluşturmak için HTML yapısını oluşturun, düzen oluşturmaya odaklanın | [HTML'e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulamada | Çevrimiçi teraryumu stilize etmek için CSS oluşturun, CSS'in temellerine ve sayfayı duyarlı hale getirmeye odaklanın | [CSS'e Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışlar, DOM Manipülasyonu | Teraryumu sürükle/bırak arayüzü olarak çalıştırmak için JavaScript oluşturun, kapanışlara ve DOM manipülasyonuna odaklanın | [JavaScript Kapanışlar, DOM Manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulamada | Bir çevrimiçi teraryum oluşturmak için HTML yapısını oluşturun, bir düzen oluşturma üzerine odaklanın | [HTML'ye Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulamada | Çevrimiçi teraryumu stilize etmek için CSS oluşturun, CSS'in temellerine odaklanarak sayfayı duyarlı hale getirin | [CSS'ye Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışlar, DOM Manipülasyonu | Teraryumu bir sürükle/bırak arayüzü olarak çalıştırmak için JavaScript oluşturun, kapanışlar ve DOM manipülasyonu üzerine odaklanın | [JavaScript Kapanışlar, DOM Manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Bir Yazma Oyunu Oluşturma | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını nasıl kullanacağınızı öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Yeşil TarayıcıUzantısı](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışma | Tarayıcıların nasıl çalıştığını, tarihçesini ve bir tarayıcıuzantısının ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Yeşil TarayıcıUzantısı](./5-browser-extension/solution/README.md) | Bir form oluşturma, bir API çağırma ve değişkenleri yerel depolamada saklama | Yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için tarayıcı uzantınızın JavaScript öğelerini oluşturun | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Yeşil TarayıcıUzantısı](./5-browser-extension/solution/README.md) | Tarayıcıdaki arka plan işlemleri, web performansı | Uzantının simgesini yönetmek için tarayıcının arka plan işlemlerini kullanın; web performansı ve bazı optimizasyonlar hakkında bilgi edinin | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha Gelişmiş Oyun Geliştirme | Bir oyun oluşturma hazırlığında Sınıflar ve Kompozisyon kullanarak Kalıtım ve Yayın/Abonelik modelini öğrenin | [Gelişmiş Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Tuval Üzerine Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | [Tuval Üzerine Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Öğeleri ekran üzerinde hareket ettirme | Öğelerin Kartezyen koordinatları ve Canvas API'si kullanılarak nasıl hareket edebileceğini keşfedin | [Öğeleri Ekranda Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | Çarpışma Algılama | Öğelerin birbirleriyle çarpışmasını ve tepki vermesini sağlayın, tuş vuruşlarını kullanarak performansı artırmak için bir soğuma fonksiyonu ekleyin | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 12 | [Yeşil TarayıcıEklentisi](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışma | Tarayıcıların nasıl çalıştığını, tarihçesini ve bir tarayıcıeklentisinin ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Yeşil TarayıcıEklentisi](./5-browser-extension/solution/README.md) | Bir form oluşturma, bir API çağırma ve değişkenleri yerel depolamada saklama | Tarayıcı eklentinizin JavaScript öğelerini, yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için oluşturun | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Yeşil TarayıcıEklentisi](./5-browser-extension/solution/README.md) | Tarayıcıdaki arka plan süreçleri, web performansı | Tarayıcının arka plan süreçlerini eklentinin simgesini yönetmek için kullanın; web performansı ve bazı optimizasyonlar hakkında bilgi edinin | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha İleri Düzey Oyun Geliştirme | Bir oyun oluşturma hazırlığında, hem Sınıflar hem de Kompozisyon kullanarak Kalıtım ve Yayın/Abone modelini öğrenin | [İleri Düzey Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Tuvale Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'si hakkında bilgi edinin | [Tuvale Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekranda öğeleri hareket ettirme | Öğelerin kartesyen koordinatları ve Canvas API'si kullanılarak nasıl hareket kazandığını keşfedin | [Öğeleri Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | Çarpışma Tespiti | Öğelerin birbirleriyle çarpışmasını ve tepki vermesini sağlayın, tuş vuruşlarını kullanarak ve oyunun performansını sağlamak için bir soğuma fonksiyonu ekleyin | [Çarpışma Tespiti](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Puan Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | [Puan Tutma](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Oyunu bitirme ve yeniden başlatma, varlıkları temizleme ve değişken değerlerini sıfırlama hakkında bilgi edinin | [Bitirme Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Bir Web Uygulamasında HTML Şablonları ve Yönlendirmeler | Yönlendirme ve HTML şablonları kullanarak çok sayfalı bir web sitesinin mimarisini nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirmeler](./7-bank-project/1-template-route/README.md) | Yohan |
| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Oyunu bitirme ve yeniden başlatma, varlıkları temizleme ve değişken değerlerini sıfırlama hakkında bilgi edinin | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Bir Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirme](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturma ve doğrulama rutinlerini yönetme hakkında bilgi edinin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Verileri Alma ve Kullanma Yöntemleri | Verilerin uygulamanıza nasıl girip çıktığını, nasıl alınacağını, saklanacağını ve işleneceğini öğrenin | [Veriler](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumunu nasıl koruduğunu ve bunu programlı olarak nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Verilerin uygulamanıza nasıl girip çıktığını, nasıl alındığını, saklandığını ve atıldığını öğrenin | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve bunu programlı bir şekilde nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı/VScode Kod](../../8-code-editor) | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | [VScode Kod Editörünü Kullanma](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Asistanları](./9-chat-project/README.md) | AI ile Çalışma | Kendi AI asistanınızı nasıl oluşturacağınızı öğrenin | [AI Asistanı Projesi](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoji
Müfredatımız iki temel pedagojik ilkeye dayalı olarak tasarlanmıştır:
Müfredatımız iki temel pedagojik ilkeye göre tasarlanmıştır:
* proje tabanlı öğrenme
* sık sık yapılan testler
Program, JavaScript, HTML ve CSS'in temellerini, ayrıca günümüz web geliştiricilerinin kullandığı en son araç ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal teraryum, çevre dostu tarayıcı uzantısı, uzay istilacı tarzı oyun ve işletmeler için bir bankacılık uygulaması oluşturarak pratik deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayış kazanmış olacaklar.
Program, JavaScript, HTML ve CSS'in temellerini, ayrıca günümüz web geliştiricilerinin kullandığı en son araç ve teknikleri öğretir. Öğrenciler, bir yazma oyunu, sanal teraryum, çevre dostu bir tarayıcı eklentisi, uzay istilacı tarzı bir oyun ve işletmeler için bir bankacılık uygulaması oluşturarak uygulamalı deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda, öğrenciler web geliştirme konusunda sağlam bir anlayış kazanmış olacaklar.
> 🎓 Bu müfredattaki ilk birkaç dersi Microsoft Learn'de bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık ve bunları "[JavaScript'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video eğitim koleksiyonundan bir video ile eşleştirdik. Bu koleksiyonun bazı yazarları bu müfredata katkıda bulunmuştur.
İçeriğin projelerle uyumlu olmasını sağlayarak, süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık ve bunları "[JavaScript'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video eğitim koleksiyonundan bir video ile eşleştirdik. Bu koleksiyonun bazı yazarları bu müfredata katkıda bulunmuştur.
Ek olarak, bir sınıftan önce yapılan düşük riskli bir test, öğrencinin bir konuyu öğrenmeye yönelik niyetini belirlerken, sınıf sonrası yapılan ikinci bir test daha fazla kalıcılığı sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamıveya bir kısmı alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek daha karmaşık hale gelir.
Buna ek olarak, bir sınıftan önce yapılan düşük riskli bir test, öğrencinin bir konuyu öğrenmeye yönelik niyetini belirlerken, sınıf sonrası yapılan ikinci bir test daha fazla kalıcılığı sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamı ya da bir kısmı alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek daha karmaşık hale gelir.
JavaScript çerçevelerini tanıtmaktan özellikle kaçınarak, bir çerçeve benimsemeden önce bir web geliştirici olarak ihtiyaç duyulan temel becerilere odaklandık. Bu müfredatı tamamladıktan sonra iyi bir sonraki adım, başka bir video koleksiyonu aracılığıyla Node.js hakkında bilgi edinmek olacaktır: "[Node.js'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
JavaScript çerçevelerini tanıtmaktan özellikle kaçınarak, bir çerçeve benimsemeden önce bir web geliştiricisi olarak ihtiyaç duyulan temel becerilere odaklandık. Bu müfredatı tamamladıktan sonra iyi bir sonraki adım, başka bir video koleksiyonu olan "[Node.js'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" hakkında bilgi edinmek olacaktır.
> [Davranış Kuralları](CODE_OF_CONDUCT.md) ve [Katkı Sağlama](CONTRIBUTING.md) yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
> [Davranış Kuralları](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) yönergelerimize göz atın. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
## 🧭 Çevrimdışı erişim
Bu belgeleri [Docsify](https://docsify.js.org/#/) kullanarak çevrimdışı çalıştırabilirsiniz. Bu depoyu çatallayın, [Docsify'i yükleyin](https://docsify.js.org/#/quickstart) yerel makinenize yükleyin ve ardından bu deponun kök klasöründe `docsify serve` yazın. Web sitesi localhost'unuzda 3000 numaralı portta sunulacaktır: `localhost:3000`.
Bu dokümantasyonu [Docsify](https://docsify.js.org/#/) kullanarak çevrimdışı çalıştırabilirsiniz. Bu depoyu çatallayın, [Docsify'i yükleyin](https://docsify.js.org/#/quickstart) ve ardından bu deponun kök klasöründe `docsify serve` yazın. Web sitesi, localhost'unuzda `localhost:3000` adresinde 3000 portunda sunulacaktır.
## 📘 PDF
Tüm derslerin PDF'sini [burada](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulabilirsiniz.
Tüm derslerin PDF'sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
## 🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Şunlara göz atın:
### Azure / Edge / MCP / Agents
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Ajanlar
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Üretken Yapay Zeka Serisi
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Temel Eğitim
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Temel Öğrenim
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Serisi
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Eğer takılırsanız veya yapay zeka uygulamaları oluşturma konusunda sorularınız olursa, katılın:
Eğer takılırsanız veya yapay zeka uygulamaları oluşturma konusunda sorularınız olursa, MCP hakkında tartışmalara katılabilirsiniz. Bu, soruların memnuniyetle karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
[](https://aka.ms/foundry/discord)
Eğer ürünle ilgili geri bildirimde bulunmak veya hata bildirmek isterseniz, ziyaret edin:
Eğer ürünle ilgili geri bildirimleriniz veya oluşturma sırasında hatalarınız varsa, şu adresi ziyaret edin:
[](https://aka.ms/foundry/forum)
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakabilirsiniz.
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakın.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**:
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz.
chris
6 days ago
committed by
GitHub