Microsoft Cloud Advocates tarafından sunulan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri terraryumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML konularına dalıyor. Quizler, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Yeteneklerinizi geliştirip bilginizin kalıcılığını artırmak için etkili proje tabanlı öğretim yöntemimizi kullanın. 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 Forklayın: 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 uzmanlar ile diğer geliştiricilerle tanışın
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Yerelde Klonlamayı mı Tercih Ediyorsunuz?
Bu depo 50'den fazla dil çevirisi içeriyor ve bu da indirme boyutunu önemli ölçüde artırıyor. Çeviriler olmadan klonlamak için seyrek kontrolü (sparse checkout) kullanın:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"Bu, kursu tamamlamanız için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile size sağlar.
Ek dil çevirileri istiyorsanız desteklenen diller burada listelenmiştir
Başlangıç kaynakları, Öğrenci paketleri ve hatta ücretsiz sertifika kuponu almanın yollarını bulacağınız Öğrenci Merkezi sayfasını ziyaret edin. Bu sayfa, içeriği aylık olarak değiştirdiğimiz için zaman zaman kaydetmek ve kontrol etmek isteyeceğiniz bir sayfadır.
Yeni Meydan Okuma eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayacağınız yeni bir meydan okumadır. Daha önce Agent modunu kullanmadıysanız, sadece metin üretmekle kalmaz, dosya oluşturabilir ve düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
Yeni AI Asistan projesi eklendi, inceleyin proje
Yeni Generatif AI müfredatımızı kaçırmayın!
Başlamak için https://aka.ms/genai-js-course adresini ziyaret edin!
- Temellerden RAG'e kadar her şeyi kapsayan dersler.
- GenAI ve yardımcı uygulamamız ile tarihi karakterlerle etkileşim.
- Eğlenceli ve sürükleyici bir anlatım, zamanda yolculuk yapacaksınız!
Her ders, tamamlanacak bir ödev, bilgi kontrolü ve şu konular gibi öğrenmenizi yönlendirecek bir meydan okuma içerir:
- Prompt kullanımı ve prompt mühendisliği
- Metin ve görsel uygulama üretimi
- Arama uygulamaları
Başlamak için https://aka.ms/genai-js-course adresini ziyaret edin!
Öğretmenler, bu müfredatı nasıl kullanacağınıza dair bazı öneriler ekledik. Geri bildirimlerinizi tartışma forumumuzda duymak isteriz!
Öğrenenler, her ders için, bir ders öncesi quiz 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 artırmak için, projeler üzerinde birlikte çalışmak için akranlarınızla bağlantı kurun! Tartışmalar tartışma forumumuzda teşvik edilmektedir ve moderatörlerimiz sorularınızı cevaplamak için orada olacaktır.
Eğitiminizi ilerletmek için ek çalışma materyalleri için Microsoft Learn keşfetmenizi şiddetle tavsiye ederiz.
Bu müfredat, kullanıma hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı Codespace içinde (tarayıcı tabanlı, kurulum gerektirmeyen ortam), ya da bilgisayarınızda Visual Studio Code gibi bir metin düzenleyici kullanarak çalıştırmayı tercih edebilirsiniz.
Çalışmanızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu yapmak için sayfanın üstündeki Use this template butonuna tıklayın. Bu, GitHub hesabınızda müfredatın bir kopyasını içeren yeni bir depo oluşturacaktır.
Şu adımları izleyin:
- Depoyu Forklayın: Sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
- Depoyu Klonlayın:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Oluşturduğunuz deponuzda Code butonuna tıklayın ve Open with Codespaces seçeneğini seçin. Bu, sizin için yeni bir Codespace oluşturacaktır.
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörü, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz olan, Programlama Dilleri ve Ticaret Araçlarına Giriş, size bunlar için çeşitli seçenekleri sunacak ve sizin için en uygun olanı seçmenize yardımcı olacaktır.
Önerimiz, editör olarak Visual Studio Code kullanmanızdır; bu editör ayrıca yerleşik bir Terminal içerir. Visual Studio Code'u buradan indirebilirsiniz.
-
Depo'nuzu bilgisayarınıza klonlayın. Bunu yapmak için Code düğmesine tıklayıp URL'yi kopyalayabilirsiniz:
Ardından, Visual Studio Code içinde Terminal uygulamasını açın ve
<your-repository-url>yerine az önce kopyaladığınız URL'yi koyarak aşağıdaki komutu çalıştırın:git clone <your-repository-url>
-
Visual Studio Code’da klasörü açın. Bunu yapmak için File > Open Folder seçeneğine tıklayıp klonladığınız klasörü seçin.
Önerilen Visual Studio Code uzantıları:
- Live Server - Visual Studio Code içinde HTML sayfalarını önizlemek için
- Copilot - kod yazmayı hızlandırmak için yardımcı
- isteğe bağlı çizim notu
- isteğe bağlı destekleyici video
- derse hazırlık sınavı
- yazılı ders
- proje tabanlı derslerde projeyi adım adım nasıl oluşturacağınıza dair rehberler
- bilgi kontrolü
- bir meydan okuma
- destekleyici okuma
- ödev
- ders sonrası sınav
Sınavlar hakkında not: Tüm sınavlar Quiz-app klasöründe bulunur, toplam 48 sınav vardır ve her biri üç sorudan oluşur. Bunlar burada mevcuttur; quiz uygulaması yerel olarak çalıştırılabilir veya Azure’a dağıtılabilir; talimatlar
quiz-appklasöründedir.
| Proje Adı | Öğretilen Konseptler | Öğrenme Hedefleri | Bağlantılı Ders | Yazar | |
|---|---|---|---|---|---|
| 01 | Başlarken | Programlamaya Giriş ve Kullanılan Araçlar | Çoğu programlama dilinin temel yapıtaşlarını ve profesyonel geliştiricilerin işlerini yapmasına yardımcı yazılımları öğrenin | Programlama Dilleri ve Araçlarına Giriş | Jasmine |
| 02 | Başlarken | GitHub Temelleri, takım ile çalışma | Projenizde GitHub kullanımı, kod tabanı üzerinde başkalarıyla işbirliği yapmak | GitHub’a Giriş | Floor |
| 03 | Başlarken | Erişilebilirlik | İnternet erişilebilirliğinin temellerini öğrenin | Erişilebilirlik Temelleri | Christopher |
| 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temellerini öğrenin | Veri Tipleri | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Uygulama mantığı akışını yönetmek için fonksiyonlar ve metodları öğrenin | Fonksiyonlar ve Metodlar | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Vermek | Kodunuzda karar verme yöntemleri kullanarak koşullar oluşturmayı öğrenin | Karar Verme | Jasmine |
| 07 | JS Temelleri | Dizi ve Döngüler | JavaScript'te diziler ve döngülerle veri üzerinde çalışın | Diziler ve Döngüler | Jasmine |
| 08 | Terrarium | HTML Uygulaması | Çevrimiçi terrarium oluşturmak için HTML yapısı geliştirin, odak nokta düzen kurmak | HTML'ye Giriş | Jen |
| 09 | Terrarium | CSS Uygulaması | Çevrimiçi terrarium’u stilize etmek için CSS yazın, temel CSS ve sayfanın duyarlı hale getirilmesine odaklanın | CSS'ye Giriş | Jen |
| 10 | Terrarium | JavaScript Kapanışları, DOM manipülasyonu | Terrarium’u sürükle/bırak arayüzü yapacak JavaScript’i oluşturun; kapanışlar ve DOM manipülasyonuna odaklanın | JavaScript Kapanışları, DOM Manipülasyonu | Jen |
| 11 | Yazma Oyunu | Yazma Oyunu Tasarlama | Klavye olaylarını kullanarak JavaScript uygulamanızın mantığını yönetin | Olay Tabanlı Programlama | Christopher |
| 12 | Green Tarayıcı Uzantısı | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihçesini ve tarayıcı uzantısının ilk öğelerinin iskeletini oluşturmayı öğrenin | Tarayıcılar Hakkında | Jen |
| 13 | Green Tarayıcı Uzantısı | Form oluşturma, API çağırma ve yerel depolama kullanımı | Yerel depolamada tutulan değişkenleri kullanarak API çağıran tarayıcı uzantınızın JavaScript parçalarını oluşturun | API'ler, Formlar ve Yerel Depolama | Jen |
| 14 | Green Tarayıcı Uzantısı | Tarayıcı arka plan işlemleri, web performansı | Uzantının ikonu için tarayıcı arka plan işlemlerini kullanın; web performansı ve bazı optimizasyonları öğrenin | Arka Plan Görevleri ve Performans | Jen |
| 15 | Uzay Oyunu | JavaScript ile Daha İleri Seviye Oyun Geliştirme | Kalıtım konusunu hem Sınıflar hem Bileşim ile ve Yayıncı/Abone (Pub/Sub) desenini öğrenerek oyun geliştirmeye hazırlanın | İleri Seviye Oyun Geliştirmeye Giriş | Chris |
| 16 | Uzay Oyunu | Canvas’a Çizim | Ekrana öğeler çizmek için kullanılan Canvas API’sini öğrenin | Canvas’a Çizim | Chris |
| 17 | Uzay Oyunu | Ekranda Ögeleri Hareket Ettirme | Öğelerin Kartezyen koordinatları ve Canvas API’si kullanılarak hareket kazanmasını keşfedin | Öğeleri Hareket Ettirme | Chris |
| 18 | Uzay Oyunu | Çarpışma Algılama | Öğelerin birbirine çarpmasını ve tepki vermesini tuş vuruşları kullanarak sağlayın, oyunun performansını garanti eden soğuma fonksiyonu ekleyin | Çarpışma Algılama | Chris |
| 19 | Uzay Oyunu | Skor Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | Skor 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 konularını öğrenin | Bitiş Koşulu | Chris |
| 21 | Bankacılık Uygulaması | Web Uygulamasında HTML Şablonları ve Rotalar | Çok sayfalı bir web sitesinin iskeletini rota ve HTML şablonları kullanarak oluşturmayı öğrenin | HTML Şablonları ve Rotalar | Yohan |
| 22 | Bankacılık Uygulaması | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama süreçlerini öğrenin | Formlar | Yohan |
| 23 | Bankacılık Uygulaması | Veri Alma ve Kullanma Yöntemleri | Uygulamanızdaki verilerin akışı, nasıl alınacağı, depolanacağı ve atılacağı hakkında bilgi edin | Veri | Yohan |
| 24 | Bankacılık Uygulaması | Durum Yönetimi Kavramları | Uygulamanızın durumunu nasıl tutacağını ve programlı olarak nasıl yöneteceğinizi öğrenin | Durum Yönetimi | Yohan |
| 25 | Tarayıcı/VScode Kodu | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | VScode Kod Editörünü Kullanma | Chris |
| 26 | Yapay Zeka Asistanları | Yapay Zeka ile Çalışma | Kendi yapay zeka asistanınızı nasıl oluşturacağınızı öğrenin | Yapay Zeka Asistanı projesi | Chris |
Müfredatımız iki temel pedagojik ilke üzerine tasarlanmıştır:
- proje tabanlı öğrenme
- sık tekrarlanan sınavlar
Program, JavaScript, HTML ve CSS’nin temellerini, ayrıca günümüz web geliştiricileri tarafından kullanılan en yeni araç ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terrarium, çevre dostu tarayıcı uzantısı, uzay işgalcisi tarzı oyun ve işletmelere yönelik bankacılık uygulaması gibi projeler yaparak uygulamalı deneyim kazanacaklar. Seri sonunda öğrenciler web geliştirme hakkında sağlam bir anlayış kazanacaklar.
🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn üzerinden bir Öğrenme Yolu olarak alabilirsiniz!
İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale gelir ve kavramların akılda kalıcılığı artar. Ayrıca JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık; bunlar, bazı yazarları bu müfredata katkıda bulunan "Başlangıç Serisi: JavaScript" video koleksiyonuyla eşleştirildi.
Ek olarak, dersten önce yapılan düşük riskli bir sınav öğrencinin öğrenme niyetini belirlerken, dersten sonra yapılan ikinci sınav ise bilgilerin pekişmesini sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamıyla veya parça parça alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek karmaşıklaşır.
JavaScript çerçeveleri tanıtmayarak web geliştirici olarak temel becerilere odaklanmayı amaçladık; bu yüzden müfredatı tamamladıktan sonra iyi bir sonraki adım başka bir video koleksiyonu olan "Başlangıç Serisi: Node.js" üzerinden Node.js öğrenmek olabilir.
Davranış Kurallarımıza ve Katkı Sağlama Rehberimize göz atın. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
Bu dökümantasyonu çevrimdışı olarak Docsify kullanarak çalıştırabilirsiniz. Bu repoyu çatallayın, yerel makinenize Docsify’ı kurun ve daha sonra bu repoda kök klasörde docsify serve yazın. Web sitesi localhost’ta 3000 portunda çalışacaktır: localhost:3000.
Tüm derslerin PDF’sine buradan ulaşabilirsiniz.
Ekibimiz başka kurslar da üretiyor! Göz atın:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Tıkandığınızda veya AI uygulamaları geliştirmekle ilgili sorularınız olduğunda, MCP hakkında tartışmalara katılın. Soruların memnuniyetle karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Ürün geri bildirimi veya hatalarınız varsa şu adresi ziyaret edin:
Bu depo MIT lisansı altındadır. Daha fazla bilgi için LICENSE dosyasına bakınız.
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. Orijinal belge, kendi ana dilinde resmi kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucunda ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu tutulamayız.