28 KiB
Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
- Depoyu Çatallayın:
bağlantısına tıklayın.
- Depoyu Klonlayın:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
- Azure AI Foundry Discord'a Katılın ve uzmanlarla ve diğer geliştiricilerle tanışın
Başlangıç Seviyesi 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ı projeler aracılığıyla JavaScript, CSS ve HTML konularına odaklanır. Quizler, tartışmalar ve pratik ödevlerle öğreniminizi pekiştirin. Proje tabanlı etkili öğretim yöntemimizle becerilerinizi geliştirin ve bilgilerinizi kalıcı hale getirin. Kodlama yolculuğunuza bugün başlayın!
🌐 Çok Dilli Destek
GitHub Action ile Destekleniyor (Otomatik ve Her Zaman Güncel)
Fransızca | İspanyolca | Almanca | Rusça | Arapça | Farsça | Urduca | Çince (Basitleştirilmiş) | Çince (Geleneksel, Makao) | Çince (Geleneksel, Hong Kong) | Çince (Geleneksel, Tayvan) | Japonca | Korece | Hintçe | Bengalce | Marathi | Nepalce | Pencapça (Gurmukhi) | Portekizce (Portekiz) | Portekizce (Brezilya) | İtalyanca | Lehçe | Türkçe | Yunanca | Tayca | İsveççe | Danca | Norveççe | Fince | Felemenkçe | İbranice | Vietnamca | Endonezce | Malayca | Tagalog (Filipince) | Svahili | Macarca | Çekçe | Slovakça | Romence | Bulgarca | Sırpça (Kiril) | Hırvatça | Slovence | Ukraynaca | Burmaca (Myanmar)
Ek dil çevirileri talep etmek isterseniz, desteklenen dillerin listesi burada bulunmaktadır.
🧑🎓 Öğrenci misiniz?
Öğrenci Merkezi sayfasını ziyaret edin. Burada başlangıç kaynakları, öğrenci paketleri ve hatta ücretsiz sertifika kuponu alma yollarını bulabilirsiniz. Bu sayfayı sık kullanılanlara ekleyin ve aylık olarak değişen içerikleri kontrol edin.
📣 Duyuru - Yeni Generative AI Projesi
Yeni bir AI Asistan projesi eklendi, projeye göz atın
📣 Duyuru - Yeni Müfredat Generative AI için JavaScript
Yeni Generative AI müfredatımızı kaçırmayın!
Başlamak için https://aka.ms/genai-js-course adresini ziyaret edin!
- Temellerden RAG'ye kadar her şeyi kapsayan dersler.
- GenAI ve yardımcı uygulamamızla tarihi karakterlerle etkileşim kurun.
- Eğlenceli ve ilgi çekici bir anlatımla zamanda yolculuk yapacaksınız!
Her ders, tamamlamanız için bir ödev, bilgi kontrolü ve bir öğrenme rehberi içerir. Öğreneceğiniz konular arasında:
- 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 adresini ziyaret edin!
🌱 Başlarken
Öğretmenler, bu müfredatı nasıl kullanacağınızla ilgili bazı öneriler ekledik. Geri bildirimlerinizi tartışma forumumuzda paylaşabilirsiniz!
Öğrenciler, her ders için bir ön testle başlayın, ders materyalini okuyarak devam edin, çeşitli etkinlikleri tamamlayın ve son testle bilginizi 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 teşvik edilmektedir ve moderatör ekibimiz sorularınızı yanıtlamak için hazır olacaktır.
Eğitiminizi daha da ileri taşımak için Microsoft Learn platformunu 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ı bir Codespace (tarayıcı tabanlı, kurulum gerektirmeyen bir ortam) veya bilgisayarınızda bir metin düzenleyici kullanarak yerel olarak çalıştırmayı seçebilirsiniz. Örneğin, Visual Studio Code.
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.
Şu adımları izleyin:
- Depoyu Çatallayın: Bu sayfanın sağ üst köşesindeki "Fork" düğmesine tıklayın.
- Depoyu Klonlayın:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Müfredatı Codespace'te Çalıştırma
Oluşturduğunuz bu deponun kopyasında, Kod düğmesine tıklayın ve Codespaces ile Aç seçeneğini seçin. Bu, üzerinde çalışmanız için yeni bir Codespace oluşturacaktır.
!Codespace./images/createcodespace.png)
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ş, bu araçların her biri için çeşitli seçenekleri gözden geçirmenize yardımcı olacaktır.
Önerimiz, düzenleyici olarak Visual Studio Code kullanmanızdır. Bu düzenleyici, yerleşik bir Terminal içerir. Visual Studio Code'u buradan indirebilirsiniz.
-
Depoyu bilgisayarınıza klonlayın. Bunu, Kod düğmesine tıklayıp URL'yi kopyalayarak yapabilirsiniz:
Ardından, Visual Studio Code içindeki Terminal aracını açın ve az önce kopyaladığınız URL'yi
<your-repository-url>
ile değiştirerek şu komutu çalıştırın:git clone <your-repository-url>
-
Klasörü Visual Studio Code'da açın. Bunu, Dosya düğmesine tıklayarak yapabilirsiniz.
Klasörü Aç ve az önce klonladığınız klasörü seçin. Önerilen Visual Studio Code eklentileri:
- Live Server - HTML sayfalarını Visual Studio Code içinde önizlemek için
- Copilot - kod yazma hızınızı artırmak için
📂 Her ders şunları içerir:
- isteğe bağlı çizim notları
- 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 kontrolü
- bir meydan okuma
- ek okuma materyalleri
- ödev
- ders sonrası test
Testler hakkında bir not: Tüm testler Quiz-app klasöründe yer alır, toplamda üçer sorudan oluşan 48 test vardır. Testlere buradan ulaşabilirsiniz. Test uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir;
quiz-app
klasöründeki talimatları takip edin.
🗃️ 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çlara Giriş | 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ş | Floor |
03 | Başlangıç | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | Erişilebilirlik Temelleri | Christopher |
04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temellerini öğrenin | Veri Türleri | 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 | Jasmine ve Christopher |
06 | JS Temelleri | JS ile Karar Verme | Karar verme yöntemlerini kullanarak kodunuzda koşullar oluşturmayı öğrenin | Karar Verme | 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 | Jasmine |
08 | Terrarium | HTML Uygulaması | Bir çevrimiçi terrarium oluşturmak için HTML yapısını oluşturun, düzen oluşturmaya odaklanın | HTML'ye Giriş | Jen |
09 | Terrarium | CSS Uygulaması | Çevrimiçi terrarium'u stilize etmek için CSS oluşturun, CSS'in temellerine ve sayfayı duyarlı hale getirmeye odaklanın | CSS'ye Giriş | Jen |
10 | Terrarium | JavaScript Kapanışlar, DOM Manipülasyonu | Terrarium'u bir sürükle/bırak arayüzü olarak işlevsel hale getirmek için JavaScript oluşturun, kapanışlara ve DOM manipülasyonuna odaklanın | JavaScript Kapanışlar, DOM Manipülasyonu | Jen |
11 | Yazma Oyunu | Bir Yazma Oyunu Oluşturun | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını nasıl kullanacağınızı öğrenin | Olay Tabanlı Programlama | Christopher |
12 | Yeşil Tarayıcı Eklentisi | Tarayıcılarla Çalışmak | 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 | Jen |
13 | Yeşil Tarayıcı Eklentisi | Bir form oluşturma, bir API çağırma ve yerel depolamada değişkenleri saklama | Yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için tarayıcı eklentinizin JavaScript öğelerini oluşturun | API'ler, Formlar ve Yerel Depolama | Jen |
14 | Yeşil Tarayıcı Eklentisi | Tarayıcıdaki Arka Plan İşlemleri, Web Performansı | Tarayıcının arka plan işlemlerini eklentinin simgesini yönetmek için kullanın; web performansı ve optimizasyonlar hakkında bilgi edinin | Arka Plan Görevleri ve Performans | Jen |
15 | Uzay Oyunu | JavaScript ile Daha İleri Seviye Oyun Geliştirme | Bir oyun oluşturmaya hazırlık olarak Sınıflar ve Kompozisyon kullanarak Kalıtım ve Pub/Sub modelini öğrenin | İleri Seviye Oyun Geliştirmeye Giriş | Chris |
16 | Uzay Oyunu | Tuval Üzerine Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | Tuval Üzerine Çizim | Chris |
17 | Uzay Oyunu | Ekranda Öğeleri Hareket Ettirme | Öğelerin kartesyen koordinatlar ve Canvas API kullanılarak nasıl hareket edebileceğini keşfedin | Öğeleri Hareket Ettirme | Chris |
18 | Uzay Oyunu | Ç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 | Chris |
19 | Uzay Oyunu | Puan Tutma | Oyunun durumu ve performansına göre matematiksel hesaplamalar yapın | Puan Tutma | Chris |
20 | Uzay Oyunu | 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 | Chris |
21 | Bankacılık Uygulaması | HTML Şablonları ve Web Uygulamasında Yönlendirme | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak oluşturmayı öğrenin | HTML Şablonları ve Yönlendirme | Yohan |
22 | Bankacılık Uygulaması | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturma ve doğrulama rutinlerini yönetme hakkında bilgi edinin | Formlar | Yohan |
23 | Bankacılık Uygulaması | Veri 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 | Veri | Yohan |
24 | Bankacılık Uygulaması | 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 | Yohan |
25 | Tarayıcı/VScode Kod | VScode ile Çalışmak | Bir kod editörü kullanmayı öğrenin | VScode Kod Editörü Kullanımı | Chris |
26 | AI Asistanları | AI ile Çalışmak | Kendi AI asistanınızı nasıl oluşturacağınızı öğrenin | AI Asistanı Projesi | Chris |
🏫 Pedagoji
Müfredatımız iki temel pedagojik prensip üzerine 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ştiricileri tarafından kullanılan en son araçları ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terrarium, çevre dostu tarayıcı eklentisi, uzay istilacı tarzı 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 üzerinde bir Öğrenme Yolu olarak alabilirsiniz!
İçeriğin projelerle uyumlu hale getirilmesi, süreci öğrenciler için daha ilgi çekici hale getirir ve kavramların kalıcılığı artırılır. Ayrıca, JavaScript temellerini tanıtan birkaç başlangıç dersi yazdık ve bunları "JavaScript'e Başlangıç Serisi" adlı video 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 tasarlandı 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.
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".
Davranış Kuralları ve Katkı Sağlama yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
🧭 Çevrimdışı erişim
Bu dokümantasyonu Docsify kullanarak çevrimdışı çalıştırabilirsiniz. Bu repoyu forklayın, Docsify'i yükleyin yerel makinenize yükleyin ve ardından bu repo'nun kök klasöründe docsify serve
yazın. Web sitesi localhost'unuzda 3000 portunda sunulacaktır: localhost:3000
.
Tüm derslerin PDF'sine buradan ulaşabilirsiniz.
🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Şunlara göz atın:
- Başlangıç Seviyesi için Üretken AI
- Başlangıç Seviyesi için Üretken AI .NET
- JavaScript ile Üretken AI
- Java ile Üretken AI
- Başlangıç Seviyesi için AI
- Yeni Başlayanlar için Veri Bilimi
- Yeni Başlayanlar için Makine Öğrenimi
- Yeni Başlayanlar için Siber Güvenlik
- Yeni Başlayanlar için Web Geliştirme
- Yeni Başlayanlar için IoT
- Yeni Başlayanlar için XR Geliştirme
- GitHub Copilot'u Etkin Kullanım için Ustalaşma
- C#/.NET Geliştiricileri için GitHub Copilot'ta Ustalaşma
- Kendi Copilot Maceranı Seç
Lisans
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için LICENSE dosyasına bakın.
Feragatname:
Bu belge, Co-op Translator adlı yapay zeka çeviri hizmeti 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ış anlama veya yanlış yorumlamalardan sorumlu değiliz.