29 KiB
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 odaklanır. Quizler, tartışmalar ve pratik ödevlerle öğreniminizi pekiştirin. Proje tabanlı etkili öğretim yöntemimizle becerilerinizi geliştirin ve bilgilerinizi optimize edin. Kodlama yolculuğunuza bugün başlayın!
Azure AI Foundry Discord Topluluğuna Katılın
Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
- Depoyu Çatallayın:
düğmesine 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
🌐 Ç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, Macau) | Ç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) | Swahili | Macarca | Çekçe | Slovakça | Romence | Bulgarca | Sırpça (Kiril) | Hırvatça | Slovence | Ukraynaca | Burma Dili (Myanmar)
Ek dil çevirileri talep etmek isterseniz, desteklenen diller burada listelenmiştir.
🧑🎓 Öğ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 sık kontrol etmek için yer imlerine ekleyin, çünkü içeriği aylık olarak değiştiriyoruz.
📣 Duyuru - Yapay Zeka ile Yeni Proje
Yeni AI Asistan projesi eklendi, projeye göz atın.
📣 Duyuru - Yeni Müfredat JavaScript için Üretken Yapay Zeka
Yeni Üretken Yapay Zeka müfredatımızı kaçırmayın!
Başlamak için https://aka.ms/genai-js-course adresini ziyaret edin!
- Temellerden RAG'a kadar her şeyi kapsayan dersler.
- GenAI ve yardımcı uygulamamızla tarihi karakterlerle etkileşim kurun.
- Eğlenceli ve ilgi çekici bir anlatım, zamanda yolculuk yapacaksınız!
Her ders, aşağıdaki konuları öğrenmenize rehberlik edecek bir ödev, bilgi kontrolü ve bir meydan okuma içerir:
- İstek oluşturma ve istek 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 kullanabileceğinizle ilgili bazı öneriler ekledik. Görüşlerinizi tartışma forumumuzda paylaşmanızı çok isteriz!
Öğrenciler, her ders için bir ön ders sınavıyla başlayın ve ders materyalini okuyarak, çeşitli etkinlikleri tamamlayarak ve ders sonrası sınavla anlayışınızı 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 teşvik edilir ve moderatör ekibimiz sorularınızı yanıtlamak için hazır olacaktır.
Eğitiminizi ilerletmek 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ı Codespace (tarayıcı tabanlı, kurulum gerektirmeyen bir ortam) veya bilgisayarınızda Visual Studio Code gibi bir metin editörü kullanarak yerel olarak çalıştırmayı seçebilirsiniz.
Depo Oluşturun
Çalışmanızı kolayca kaydedebilmeniz için bu depoyu 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 "Çatalla" 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 depo 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.
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ş, bu araçların her biri için çeşitli seçenekleri gözden geçirerek sizin için en uygun olanı seçmenize yardımcı olacaktır.
Önerimiz, Visual Studio Code kullanmanızdır. Bu editör, yerleşik bir Terminal içerir. Visual Studio Code'u buradan indirebilirsiniz.
-
Depoyu bilgisayarınıza klonlayın. Bunu, Kod düğmesine tıklayarak ve URL'yi kopyalayarak yapabilirsiniz:
Ardından, Visual Studio Code içindeki Terminal açın ve kopyaladığınız URL'yi
<your-repository-url>ile değiştirerek aşağıdaki komutu çalıştırın:git clone <your-repository-url> -
Visual Studio Code'da klasörü açın. Bunu, Dosya > Klasör Aç seçeneğine tıklayarak ve klonladığınız klasörü seçerek yapabilirsiniz.
Önerilen Visual Studio Code eklentileri:
- Live Server - HTML sayfalarını Visual Studio Code içinde önizlemek için
- Copilot - kod yazmanızı hızlandırmak için
📂 Her ders şunları içerir:
- isteğe bağlı çizim notları
- isteğe bağlı ek video
- ders öncesi ısınma sınavı
- yazılı ders materyali
- proje tabanlı dersler için, projeyi nasıl oluşturacağınızı adım adım anlatan rehberler
- bilgi kontrolleri
- bir meydan okuma
- ek okuma materyalleri
- ödev
- ders sonrası sınav
Quizler hakkında bir not: Tüm quizler Quiz-app klasöründe yer alır, her biri üç sorudan oluşan toplam 48 quiz bulunmaktadır. Quizlere buradan ulaşabilirsiniz. Quiz uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir;
quiz-appklasö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 temelleri | 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 Vermek | Kodunuzda karar verme yöntemlerini kullanarak koşullar oluşturmayı öğrenin | Karar Vermek | 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ı | Çevrimiçi bir terrarium oluşturmak için HTML yapısını oluşturun, bir 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 çalıştırmak 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şturma | 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ı Uzantısı | 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 | Jen |
| 13 | Yeşil Tarayıcı Uzantısı | Form oluşturma, bir API çağırma ve yerel depolamada değişkenleri saklama | Tarayıcı uzantınızın JavaScript öğelerini yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için oluşturun | API'ler, Formlar ve Yerel Depolama | Jen |
| 14 | Yeşil Tarayıcı Uzantısı | Tarayıcıda 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 | Jen |
| 15 | Uzay Oyunu | 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 Pub/Sub modelini öğrenin | İleri Düzey Oyun Geliştirmeye Giriş | Chris |
| 16 | Uzay Oyunu | Tuvale Çizim Yapma | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | Tuvale Çizim Yapma | Chris |
| 17 | Uzay Oyunu | Ekranda öğeleri hareket ettirme | Öğelerin kartesyen koordinatları ve Canvas API'si kullanılarak nasıl hareket kazanabileceğini keşfedin | Öğeleri Hareket Ettirme | Chris |
| 18 | Uzay Oyunu | Çarpışma Algılama | Öğelerin birbirine çarpmasını ve tepki vermesini sağlayın, tuş vuruşlarını kullanarak performansı artırmak için bir soğuma işlevi 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ı bir şekilde nasıl yöneteceğinizi öğrenin | Durum Yönetimi | Yohan |
| 25 | Tarayıcı/VScode Kod | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | VScode Kod Editörü Kullanımı | Chris |
| 26 | AI Asistanları | AI ile Çalışma | 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 quizler
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 terrarium, ç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ışa sahip olacaklar.
🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn'de bir Öğrenme Yolu 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" 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 quiz, öğrencinin bir konuyu öğrenmeye yönelik niyetini belirlerken, sınıf sonrası yapılan ikinci bir quiz 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 karmaşıklaşır.
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 öğrenmek 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 çatallayın, Docsify'i yükleyin yerel makinenize ve ardından bu repo'nun kök klasöründe docsify serve yazın. Web sitesi localhost'unuzda 3000 numaralı portta 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:
- MCP for Beginners
- Edge AI for Beginners
- AI Agents for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- Data Science for Beginners
- ML for Beginners
- Cybersecurity for Beginners
- Web Dev for Beginners
- IoT for Beginners
- XR Development for Beginners
- Mastering GitHub Copilot for Agentic use
- C#/.NET Geliştiricileri için GitHub Copilot'u Kullanma
- Kendi Copilot Maceranızı Seçin
Yardım Alma
Eğer takılırsanız veya yapay zeka uygulamaları oluşturma konusunda sorularınız olursa, şu topluluğa katılabilirsiniz:
Eğer ürünle ilgili geri bildirimleriniz veya oluşturma sırasında hatalarınız varsa, şu adresi ziyaret edin:
Lisans
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için LICENSE dosyasına bakabilirsiniz.
Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık 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.


