Tmrow'un C02 Signal API'sini kullanarak elektrik tüketimini takip edin ve bölgenizdeki elektrik tüketimi hakkında doğrudan tarayıcınızda bir hatırlatıcı almanızı sağlayan bir tarayıcı uzantısı oluşturun. Bu özel uzantıyı kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında daha bilinçli kararlar vermenize yardımcı olacaktır.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Sıkıştırılmamış uzantıyı yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanabilmek için CO2 Signal API'si için bir API anahtarına ihtiyacınız olacak ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map) ile eşleşen bölgenizin [koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kodunu kullanıyorum).
API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizdeki enerji tüketimini yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteler için uygun bir gösterge sunmalıdır. Bu 'nokta' sistemi konsepti, [Energy Lollipop uzantısından](https://energylollipop.com/) Kaliforniya emisyonları için ilham alınarak geliştirilmiştir.
Elektrik kullanımını izlemek için tmrow'un CO2 Signal API'sini kullanarak, tarayıcınızda bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu hatırlatacak bir tarayıcı uzantısı oluşturmak. Bu uzantıyı kullanarak, bu bilgiye dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olabilirsiniz.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak uzantılar panelini bulun. Buradan, yeni bir uzantı yüklemek için 'Load unpacked' seçeneğini seçin. Açılan pencerede 'dist' klasörünü seçin ve uzantı yüklenecektir. Uzantıyı kullanabilmek için CO2 Signal API'sinden ([buradan e-posta ile alın](https://www.co2signal.com/)) bir API anahtarına ihtiyacınız olacak - bu sayfadaki kutuya e-posta adresinizi girin. Ayrıca [bölgeniz için kod](http://api.electricitymap.org/v3/zones) [Elektrik Haritası](https://www.electricitymap.org/map) üzerinden bulunabilir (örneğin, Boston için 'US-NEISO' kodunu kullanıyorum).
API anahtarı ve bölge kodu uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizdeki enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktivitelerin performansınıza uygun olup olmadığını gösteren bir işaretçi sunmalıdır. Bu 'nokta' sistemi fikri, Kaliforniya emisyonları için [Energy Lollipop Uzantısı](https://energylollipop.com/) tarafından bana ilham verdi.
Elektrik kullanımını izlemek için tmrow'un Signal CO2 API'sini kullanarak, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu doğrudan tarayıcınızda hatırlatacak bir tarayıcı eklentisi oluşturacağız. Bu özel eklentiyi kullanmak, bu bilgilere dayanarak kendi aktivitelerinizi değerlendirmenize yardımcı olacaktır.
Edge'e yüklemek için, tarayıcının sağ üst köşesindeki "üç nokta" menüsünü kullanarak Eklentiler panelini bulun. Henüz etkin değilse, Geliştirici Modu'nu (sol alt köşede) etkinleştirin. Yeni bir eklenti yüklemek için "Sıkıştırılmamış yükle" seçeneğini seçin. İstemde "dist" klasörünü açın ve eklenti yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ihtiyacınız olacak ([buradan e-posta yoluyla alabilirsiniz](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [elektrik haritasına](https://www.electricitymap.org/map) karşılık gelen [bölge koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston için "US-NEISO").
API anahtarı ve bölge eklenti arayüzüne girildiğinde, tarayıcı eklenti çubuğundaki renkli nokta, bölgenin enerji kullanımını yansıtacak şekilde değişmelidir ve yüksek enerji tüketen hangi aktivitelerin uygun olabileceği konusunda bir gösterge sağlayacaktır. Bu "nokta" sisteminin arkasındaki konsept, Kaliforniya emisyonları için [Energy Lollipop eklentisi](https://energylollipop.com/) tarafından sağlanmıştır.
tmrow'un CO2 Signal API'sini kullanarak enerji tüketiminizi takip etmek için, bölgenizdeki enerji kullanımının ne kadar yoğun olduğunu tarayıcıda bir hatırlatıcı olarak gösterebilen bir tarayıcı uzantısı oluşturacağız. Bu uzantıyı ad-hoc olarak kullanarak, bu bilgiye dayanarak aktivitelerinizi değerlendirebilirsiniz.
Edge'e yüklemek için, tarayıcının sağ üst köşesindeki "üç nokta" menüsünden "Uzantılar" panelini bulun. Buradan "Load Unpacked" seçeneğini seçerek yeni uzantıyı yükleyin. İstendiğinde "dist" klasörünü açın, böylece uzantı yüklenir. Kullanmak için, CO2 Signal API'nin API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile uyumlu [bölgenizin koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston için 'US-NEISO' kullanabilirsiniz).
API anahtarını ve bölgenizi uzantı arayüzüne girdikten sonra, tarayıcı uzantı çubuğunda görünen renkli bir nokta değişir ve bölgenizdeki enerji kullanımını yansıtarak hangi tür enerji gerektiren aktiviteleri yapmanın uygun olduğunu gösterir. Bu "nokta" sistemi konsepti, Kaliforniya'daki emisyonlar için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana ilham verilmiştir.
Elektrik kullanımını izlemek için tmrow CO2 Signal API'sini kullanarak, bölgenizdeki elektrik tüketiminin yoğunluğuna dair tarayıcınızda uyarılar almanızı sağlayan bir tarayıcı uzantısı oluşturun. Bu uzantıyı kullanmak, bu bilgiler doğrultusunda aktivitelerinizi değerlendirmenize yardımcı olacaktır.
Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Load Unpacked' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanabilmek için CO2 Signal API için bir API anahtarına ihtiyacınız olacak ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map) ile uyumlu olan bölgenize ait [kod](http://api.electricitymap.org/v3/zones) (örneğin, Boston'da 'US-NEISO' kullanıyorum).
API anahtarı ve bölge bilgisi uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta, bölgenizdeki enerji tüketimini yansıtacak şekilde değişir ve size uygun aktiviteler hakkında önerilerde bulunur. Bu 'nokta' sisteminin konsepti, [California için Energy Lollipop tarayıcı uzantısından](https://energylollipop.com/) ilham alınmıştır.
Elektrik kullanımını takip etmek için tmrow'un CO2 Signal API'sini kullanarak, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu tarayıcınızda hatırlatıcı olarak görebileceğiniz bir tarayıcı uzantısı oluşturun. Bu uzantıyı rastgele kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olacaktır.
Edge tarayıcısında yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Paketlenmemiş Yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile ilgili bölgenizin koduna ([kodları burada bulabilirsiniz](http://api.electricitymap.org/v3/zones)) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kullanıyorum).
API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizin enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteleriniz için uygun bir yönlendirme sağlayacaktır. Bu 'nokta' sisteminin konsepti, California emisyonları için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana önerildi.
> Görsel [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) üzerinden alınmıştır
Canvas öğesi üzerinde çizim yapmak için, tüm canvas grafiklerinin temelini oluşturan aynı üç adımlı süreci takip edeceksiniz. Bunu birkaç kez yaptığınızda, doğal bir hale gelir:
@ -329,11 +329,11 @@ Bir Canvas öğesi içeren bir web sayfası oluşturacaksınız. `1024*768` boyu
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Sonuç aşağıdaki gibi görünmelidir:
- **Puanlama sistemi**: Yok edilen her düşman gemisi 100 puan kazandırır (yuvarlak sayılar oyuncuların zihinsel olarak hesaplamasını kolaylaştırır). Puan, sol alt köşede gösterilir.
- **Can sayacı**: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ile oynanabilirlik arasında denge kurmak için belirlediği bir standart. Düşmanla her çarpışma bir cana mal olur. Kalan canları sağ altta gemi ikonlarıyla göstereceğiz .
- **Can sayacı**: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ile oynanabilirlik arasında denge kurmak için belirlediği bir standart. Düşmanla her çarpışma bir cana mal olur. Kalan canları sağ altta gemi ikonlarıyla göstereceğiz .
`history.pushState` kullanımı, tarayıcının navigasyon geçmişinde yeni girişler oluşturur. Tarayıcınızın *geri düğmesini* basılı tutarak bunu kontrol edebilirsiniz, şöyle bir şey göstermesi gerekir:
Geri düğmesine birkaç kez tıklamayı deneyin, URL'nin değiştiğini ve geçmişin güncellendiğini göreceksiniz, ancak aynı şablon görüntülenmeye devam eder.
3. Sayfanın yeniden yüklendiğini ve verilerin URL'de göründüğünü fark edin
### HTTP Yöntemleri Karşılaştırması
@ -350,7 +350,7 @@ Kayıt formunuzu POST yöntemi kullanarak arka uç API ile doğru şekilde ileti
2. **"Hesap Oluştur"** düğmesine tıklayın
3. **Sunucu yanıtını** tarayıcınızda gözlemleyin
**Görmeniz gerekenler:**
- **Tarayıcı** API uç noktasının URL'sine yönlendirme yapar
@ -615,7 +615,7 @@ async function register() {
3. **"Hesap Oluştur" düğmesine tıklayın**
4. **Konsol mesajlarını ve kullanıcı geri bildirimlerini gözlemleyin**
**Görmeniz gerekenler:**
- **Gönder düğmesinde** yükleme durumu görünür
@ -790,7 +790,7 @@ Kayıt formunuzu mükemmel bir kullanıcı deneyimi ve veri kalitesi sağlayan s
3. **Kullanıcı adı alanına özel karakterler deneyin**
4. **Negatif bir bakiye miktarı girin**
**Gözlemleyecekleriniz:**
- **Tarayıcı** yerel doğrulama mesajlarını gösterir
@ -938,7 +938,7 @@ Kullanıcı zaten varsa HTML'de bir hata mesajı gösterin.
İşte biraz stil ekledikten sonra son giriş sayfasının nasıl görünebileceğine dair bir örnek:
**Bu yaklaşım neden hantal hissettiriyordu:**
- Her tıklama tüm sayfanın baştan sona yeniden inşa edilmesi anlamına geliyordu
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
**SPA'lar neden daha iyi hissettiriyor:**
- Sadece gerçekten değişen bölümler güncellenir (akıllıca, değil mi?)
@ -523,7 +523,7 @@ if (data.error) {
Şimdi geçersiz bir hesapla test ettiğinizde, sayfada yardımcı bir hata mesajı göreceksiniz!
#### Adım 4: Erişilebilirlik ile Kapsayıcı Olmak
@ -961,7 +961,7 @@ Bankacılık uygulamanızı bir üst seviyeye taşımaya hazır mısınız? İş
İşte cilalanmış bir pano böyle görünebilir:
Bunu tam olarak eşleştirmek zorunda hissetmeyin - ilham kaynağı olarak kullanın ve kendi tarzınızı yaratın!
@ -190,7 +190,7 @@ Titanik'in bölümlere ayrılmış tasarımı gibi, bu sorunları tek tek çözm
Kendi etrafımızda dönmek yerine, **merkezi bir durum yönetim sistemi** oluşturacağız. Bunu, tüm önemli şeylerin sorumluluğunu üstlenen gerçekten organize bir kişi gibi düşünün:
```mermaid
flowchart TD
@ -804,7 +804,7 @@ Bu meydan okuma, hem kullanıcı deneyimini hem de uygulama verimliliğini düş
İşte ödevi tamamladıktan sonra ortaya çıkan bir örnek:
@ -112,7 +112,7 @@ Diyalogunuzu uygulamak için aşağıdaki iki yaklaşımdan birini seçin:
**Beklenen Sonuç:**
Bu görevi tamamladıktan sonra, bankacılık uygulamanız profesyonel bir görünüme ve davranışa sahip, tamamen işlevsel bir "İşlem Ekle" özelliğine sahip olmalıdır:
Bu projede, hayali bir banka nasıl kurulur öğreneceksiniz. Bu dersler, bir web uygulamasının nasıl tasarlanacağı ve yönlendirmelerin nasıl sağlanacağı, formların nasıl oluşturulacağı, durumun nasıl yönetileceği ve bir API'den banka verilerini nasıl çekeceğiniz gibi konularda talimatlar içerir.
3. Herhangi bir GitHub depo URL'sini yapıştırın (bunu deneyin: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Enter tuşuna basın ve sihri izleyin!
@ -242,7 +242,7 @@ Bu yöntem, VSCode.dev'de yeni başlıyorsanız ve belirli bir depoyu açmak ist
Kendinizi bir kodlama sihirbazı gibi hissetmek ister misiniz? Şu klavye kısayolunu deneyin: Ctrl+Shift+P (veya Mac'te Cmd+Shift+P) ile Komut Paletini açın:
@ -78,7 +78,7 @@ VSCode.dev'in bir depoyu açması için en az bir dosya gerektirdiğinden, web d
4. Bir commit mesajı yazın: "Add initial HTML structure"
5. Değişikliklerinizi kaydetmek için "Commit new file" düğmesine **tıklayın**
CodeSwing yüklendikten sonra, özgeçmiş web sitenizin canlı önizlemesi düzenleyicide görünür. Bu, siteyi düzenlerken tam olarak nasıl göründüğünü görmenizi sağlar.
**Geliştirilmiş arayüzü anlama:**
- **Bölünmüş görünüm**: Kodunuzu bir tarafta ve canlı önizlemeyi diğer tarafta **gösterir**
## 🗺️ AI Uygulama Geliştirme Yolculuğunuz
@ -194,7 +194,7 @@ mindmap
**Temel İlke**: AI uygulama geliştirme, geleneksel web geliştirme becerilerini AI hizmet entegrasyonu ile birleştirerek kullanıcılar için doğal ve duyarlı hissedilen akıllı uygulamalar oluşturur.
**Oyun alanını bu kadar kullanışlı yapan şey:**
- **Farklı AI modellerini deneyin**: GPT-4o-mini, Claude ve diğerleri (hepsi ücretsiz!)
@ -204,7 +204,7 @@ mindmap
Biraz oynadıktan sonra, sadece "Code" sekmesine tıklayın ve ihtiyacınız olan uygulama kodunu almak için programlama dilinizi seçin.
## Python Backend Entegrasyonunu Kurma
@ -2355,14 +2355,14 @@ Bu projeyi bir bulut geliştirme ortamında denemek ister misiniz? GitHub Codesp
- [Web Dev For Beginners deposuna](https://github.com/microsoft/Web-Dev-For-Beginners) **gidin**
- Sağ üst köşedeki "Use this template" (Bu şablonu kullan) düğmesine **tıklayın** (GitHub'da oturum açtığınızdan emin olun)
**Adım 2: Codespaces'i Başlat**
- Yeni oluşturduğunuz depoyu **açın**
- Yeşil "Code" düğmesine **tıklayın** ve "Codespaces" seçeneğini seçin
- Geliştirme ortamınızı başlatmak için "Create codespace on main" seçeneğini **seçin**
[](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ı 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!
Microsoft Bulut Savunucuları tarafından sunulan 12 haftalık kapsamlı kursumuz ile web geliştirme temellerini öğrenin. 24 dersin her biri, terrariumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML'i derinlemesine ele alır. Quizler, tartışmalar ve pratik ödevlerle katılım sağlayın. Becerilerinizi geliştirin ve etkili proje tabanlı pedagojimizle bilgi tutmanızı optimize edin. Kodlama yolculuğunuza bugün başlayın!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Bu, kursu tamamlamak için ihtiyacınız olan her şeyi çok daha hızlı indirebilmenizi sağlar.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**Ek çeviri dilleri istenirse, desteklenenler [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir**
#### 🧑🎓 _Öğ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 imlerinize ekleyin ve içeriği aylık olarak değiştirdiğimiz için zaman zaman kontrol edin.
Başlangıç kaynakları, Öğrenci paketleri ve hatta ücretsiz bir sertifika kuponu kazanma yollarını bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Bu sayfayı yer imlerinize ekleyin ve ayda bir içerik değişikliklerini kontrol edin.
### 📣 Duyuru - Yeni GitHub Copilot Agent modu zorlukları tamamlanabilir!
### 📣 Duyuru - Tamamlanması Gereken Yeni GitHub Copilot Agent modu zorlukları!
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.
Yeni zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayabileceğiniz yeni bir zorluk. Daha önce Agent modunu kullanmadıysanız, sadece metin üretmekle kalmaz, aynı zamanda dosyalar oluşturup düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
### 📣 Duyuru - _Generative AI kullanarak yeni bir proje oluşturun_
### 📣 Duyuru - _Generative AI kullanarak oluşturulacak Yeni Proje_
Yeni bir AI Asistan projesi eklendi, [projeye](./09-chat-project/README.md) göz atın.
Yeni AI Asistan projesi eklendi, kontrol edin [proje](./9-chat-project/README.md)
### 📣 Duyuru - _Yeni Müfredat_ Generative AI için JavaScript'te yayınlandı
### 📣 Duyuru - _JavaScript için yeni Generative AI Müfredatı_ yayınlandı
Yeni Generative AI müfredatımızı kaçırmayın!
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
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
Her ders; tamamlanacak bir ödev, bilgi kontrolü ve şu konulara rehberlik eden bir zorluk içerir:
- Promptlama ve prompt mühendisliği
- Metin ve görsel uygulama üretimi
- Arama uygulamaları
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
## 🌱 Başlarken
> **Öğ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!
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair [bazı öneriler](for-teachers.md) ekledik. Geri bildiriminizi [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 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.
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön-ders quiz’i ile başlayın, ardından ders materyalini okuyun, çeşitli etkinlikleri tamamlayın ve ders sonrası quiz ile anlayışınızı kontrol 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 edilmektedir ve 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 arkadaşlarınızla bağlantı kurun! Tartışmalar, moderatör ekibimizin sorularınızı yanıtlamak için mevcut olduğu [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilmektedir.
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.
Eğitiminizi ilerletmek için ek çalışma materyalleri için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platformunu keşfetmenizi şiddetle tavsiye ederiz.
### 📋 OrtamınızıAyarlama
### 📋 OrtamınızıKurmak
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).
Bu müfredat hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kuruluma gerek olmayan ortam_) üzerinde ya da bilgisayarınızda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin düzenleyicisi kullanarak çalıştırabilirsiniz.
#### Depo Oluşturun
Ç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.
#### Depo oluşturun
Çalışmanızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Sayfanın üstündeki **Use this template** (Bu şablonu kullan) düğmesine tıklayarak bunu yapabilirsiniz. Bu, GitHub hesabınızda müfredatın bir kopyasıyla yeni bir depo oluşturur.
Şu adımları izleyin:
1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" düğmesine tıklayın.
1. **Depoyu Forklayın**: Bu sayfanın sağ üst köşesindeki "Fork" düğmesine tıklayın.
Oluşturduğunuz bu deponun kopyasında, **Kod** düğmesine tıklayın ve **Codespaces ile Aç** seçeneğini seçin. Bu, çalışmanız için yeni bir Codespace oluşturacaktır.
Oluşturduğunuz deponuzda **Code** (Kod) düğmesine tıklayın ve **Open with Codespaces** (Codespaces ile Aç) seçeneğini seçin. Bu, üzerinde çalışmanız için yeni bir Codespace oluşturacaktır.
#### MüfredatıBilgisayarınızda Yerel Olarak Çalıştırma
#### 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 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.
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 Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), seçiminize yardımcı olacak bu araçlar için çeşitli seçenekleri tanıtacaktır.
Ö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.
Önerimiz, ayrıca yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) içeren [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) editörünü kullanmanızdır. 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) açın ve aşağıdaki komutu çalıştırın. `<your-repository-url>` yerine az önce kopyaladığınız URL'yi yazın:
Sonra, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bölümünü açın ve `<your-repository-url>` yerine az önce kopyaladığınız URL'yi koyarak aşağıdaki komutu çalıştırın:
```bash
git clone <your-repository-url>
```
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.
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) - 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
> * [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 yazmanızı hızlandırmak için
## 📂 Her ders şunları içerir:
- isteğe bağlıçizim notları
- isteğe bağlıskeç notu
- isteğe bağlı ek video
- ders öncesi ısınma testi
- yazılı ders
- proje tabanlı dersler için, projeyi nasıl oluşturacağınızı adım adım anlatan rehberler
- bilgi kontrolleri
- proje tabanlı dersler için projenin nasıl oluşturulacağına dair adım adım rehberler
> **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.
> **Testler hakkında bir not**: Tüm testler, her biri üç sorudan oluşan toplam 48 test olmak üzere Quiz-app klasöründe yer almaktadır. Testlere [buradan](https://ff-quizzes.netlify.app/web/) erişebilirsiniz; quiz uygulaması yerel olarak çalıştırılabilir veya Azure'da dağıtılabilir; `quiz-app` klasöründeki talimatları izleyin.
## 🗃️ Dersler
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
| 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 |
| 01 | Başlarken | Programlamaya Giriş ve 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, takım ile çalışma | Projenizde GitHub'ı nasıl kullanacağınızı, 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 Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Bir uygulamanın mantık akışını yönetmek için fonksiyonlar ve metodlar hakkında bilgi edinin | [Fonksiyonlar ve Metodlar](./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 | 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ı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 | [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) | 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 |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngülerle veriyle çalışma | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulaması | Bir çevrimiçi terraryum oluşturmak için HTML inşa edin, özellikle bir düzen oluşturmaya odaklanın | [HTML'ye Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulaması | Çevrimiçi terraryumu stilize etmek için CSS oluşturun, sayfayı duyarlı yapmak dahil CSS temellerine odaklanın | [CSS'ye Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipülasyonu | Terraryumun sürükle/bırak arayüzü olarak işlev görmesi için JavaScript oluşturun, closures ve DOM manipülasyonuna odaklanın | [JavaScript Closures, DOM Manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Yazma Oyunu Oluşturma | JavaScript uygulamanızın mantığınısürdürmek 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ışmak | Tarayıcıların nasıl çalıştığını, tarihçesini ve bir tarayıcıuzantısının ilk elemanlarını nasıl iskeletini 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) | Form oluşturma, API çağırma ve yerel depolamada değişken 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ı 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 geliştirmeye hazırlık olarak Sınıflar ve Kompozisyon kullanarak Tür mirası ve Yayıncı/Abone (Pub/Sub) desenini öğrenin | [Gelişmiş Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas'a Çizim | Ekrana eleman çizmek için kullanılan Canvas API hakkında bilgi edinin | [Canvas'a Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekrandaki elemanları hareket ettirme | Kartezyen koordinatları ve Canvas API kullanarak elemanların hareket kazanmasını keşfedin | [Elemanları 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 | Elemanların birbirine çarpmasını ve tepki vermesini klavye basışlarıyla sağlayın; oyunun performansı için bir dinlenme fonksiyonu oluşturun | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skor Tutma | Oyunun durumu ve performansına bağlı matematiksel hesaplamalar yapın | [Skor 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 | Oyunun bitirilmesi ve yeniden başlatılması hakkında bilgi edinin, varlıkların temizlenmesi ve değişken değerlerinin sıfırlanması dahil | [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 Rotalar | Çok sayfalı bir web sitesinin mimarisinin iskeletini oluşturmak için routing ve HTML şablonlarını kullanmayı öğrenin | [HTML Şablonları ve Rotalar](./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 işlemlerini nasıl yapacağınızı öğrenin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Verinin uygulamanıza nasıl giriş ve çıkış yaptığı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 programatik olarak nasıl yönettiğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı/VScode Kodu](../../8-code-editor) | VScode ile Çalışmak | Bir kod editörü nasıl kullanılır öğrenin| [VScode Kod Editörü Kullanımı](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Yapay Zeka Asistanları](./9-chat-project/README.md) | Yapay Zeka ile Çalışmak | Kendi Yapay Zeka asistanınızı nasıl oluşturacağınızı öğrenin | [Yapay Zeka Asistanı projesi](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoji
Müfredatımız iki temel pedagojik ilkeye göre tasarlanmıştır:
Müfredatımız iki temel pedagojik ilke göz önünde bulundurularak 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, 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.
Program, JavaScript, HTML ve CSS'nin temellerini, ayrıca günümüz web geliştiricilerinin kullandığı en son araç ve teknikleri öğretir. Öğrenciler, bir yazma oyunu, sanal terraryum, çevre dostu tarayıcı uzantısı, uzay istilacı tarzı oyun ve iş için bankacılık uygulaması inşa ederek pratik deneyim elde etme fırsatı bulacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayışa sahip 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!
> 🎓 Bu müfredattaki ilk birkaç dersi Microsoft Learn üzerinden 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 getirilmiş ve kavramların akılda kalıcılığı artırılmıştır. Ayrıca, kavramların tanıtılması için JavaScript temellerinde birkaç başlangıç dersleri yazdık ve bunları, yazarlarından bazıları bu müfredatın oluşturulmasına katkı sağlamış olan "[JavaScript’e Yeni Başlayanlar Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video eğitimi koleksiyonundan bir video ile eşleştirdik.
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.
Ek olarak, sınıftan önce yapılan düşük baskılı bir test öğrencinin bir konuyu öğrenme niyetini belirlerken, sınıftan sonra yapılan ikinci test öğrendiklerinin korunmasını sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmış olup tamamen veya kısmen alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek karmaşıklaşır.
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.
Bir framework’e geçmeden önce bir web geliştiricisi için gerekli temel becerilere odaklanmak amacıyla JavaScript frameworklerini bilinçli olarak tanıtmaktan kaçındık, ancak bu müfredatı tamamlamak için iyi bir sonraki adım başka bir video koleksiyonu olan "[Node.js’e Yeni Başlayanlar Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" aracılığıyla Node.js öğrenmek olur.
> [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!
> [Davranış Kurallarımız](CODE_OF_CONDUCT.md) ve [Katılım](CONTRIBUTING.md) rehberlerimizi ziyaret edin. Yapıcı geri bildirimlerinizi bekliyoruz!
## 🧭 Çevrimdışı erişim
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.
Bu dokümantasyonu çevrimdışı olarak [Docsify](https://docsify.js.org/#/) kullanarak çalıştırabilirsiniz. Bu repoyu çatallayın, local makinenize [Docsify](https://docsify.js.org/#/quickstart) kurun ve ardından bu repoyu içeren kök klasörde `docsify serve` yazın. Web sitesi, yerel sunucunuzda 3000 portundan sunulacaktır: `localhost:3000`.
## 📘 PDF
Tüm derslerin PDF'sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
Tüm derslerin PDF hali [burada](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulunabilir.
## 🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Şunlara göz atın:
Ekibimiz başka kurslar da üretiyor! Göz atın:
<!-- 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)
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Üretken Yapay Zeka Serisi
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 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)
### Üretken Yapay Zeka Serisi
[](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 Öğrenme
[](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, MCP hakkında tartışmalara katılabilirsiniz. Bu, soruların memnuniyetle karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Yapay zeka uygulamaları geliştirme konusunda takılırsanız veya herhangi bir sorunuz olursa, MCP hakkında tartışmalara katılmak için diğer öğrenenlerle ve deneyimli geliştiricilerle buluşun. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Bu depo MIT lisansıaltında lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakın.
Bu depo MIT lisansıile lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
---
<!-- 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ış yorumlamalardan sorumlu değiliz.
Bu belge, AI çeviri servisi [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba gösterilse de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belge, kendi dilinde otoriter kaynak olarak değerlendirilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanımıyla ortaya çıkabilecek yanlış anlamalar veya yanlış yorumlamalar nedeniyle sorumluluk kabul edilmemektedir.
localizeflow[bot]
7 months ago
