|
3 weeks ago | |
---|---|---|
.. | ||
1-getting-started-lessons | 3 weeks ago | |
2-js-basics | 3 weeks ago | |
3-terrarium | 3 weeks ago | |
4-typing-game | 3 weeks ago | |
5-browser-extension | 3 weeks ago | |
6-space-game | 3 weeks ago | |
7-bank-project | 3 weeks ago | |
8-code-editor/1-using-a-code-editor | 3 weeks ago | |
docs | 4 weeks ago | |
lesson-template | 4 weeks ago | |
quiz-app | 4 weeks ago | |
CODE_OF_CONDUCT.md | 4 weeks ago | |
CONTRIBUTING.md | 4 weeks ago | |
README.md | 3 weeks ago | |
SECURITY.md | 4 weeks ago | |
SUPPORT.md | 4 weeks ago | |
_404.md | 4 weeks ago | |
for-teachers.md | 4 weeks ago |
README.md
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
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ı projeler aracılığıyla JavaScript, CSS ve HTML konularına odaklanır. Quizler, tartışmalar ve pratik ödevlerle öğreniminizi pekiştirin. Proje tabanlı pedagojimizle becerilerinizi geliştirin ve bilgilerinizi optimize edin. Kodlama yolculuğunuza bugün başlayın!
🧑🎓 Öğ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ı yer imlerine ekleyin ve aylık olarak değişen içerikleri görmek için düzenli olarak kontrol edin.
📣 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, tamamlanması gereken bir ödev, bilgi kontrolü ve aşağıdaki konuları öğrenmenize rehberlik edecek 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 quizine başlayın, ders materyalini okuyarak devam edin, çeşitli etkinlikleri tamamlayın ve son ders quizini yaparak anlayışınızı kontrol edin.
Öğrenim deneyiminizi geliştirmek için projeler üzerinde birlikte çalışmak üzere arkadaşları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 ve ek çalışma materyalleri bulmanızı öneririz.
📋 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 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'de Ç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.
!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 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 incelemenize 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ıklayıp URL'yi kopyalayarak yapabilirsiniz:
Ardından, Visual Studio Code içindeki Terminal bölümünü açın ve 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 > 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 yazma hızınızı artırmak için
📂 Her Ders Şunları İçerir:
- isteğe bağlı çizim notları
- isteğe bağlı ek video
- ders öncesi ısınma quizleri
- 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ı quiz
Quizler hakkında bir not: Tüm quizler Quiz-app klasöründe yer alır, toplamda üçer sorudan oluşan 48 quiz vardır. Quizler burada mevcuttur. Quiz 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 | Öğrenim Hedefleri | Bağlantılı Ders | Yazar | |
---|---|---|---|---|---|
01 | Başlarken | Programlama ve Araçlara Giriş | Çoğu programlama dilinin temel yapı taşlarını ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımları öğrenin | Programlama Dillerine ve Araçlarına Giriş | 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ş | Floor |
03 | Başlarken | 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 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 veriyle çalışın | Diziler ve Döngüler | Jasmine |
08 | Teraryum | HTML Uygulamada | Bir çevrimiçi teraryum oluşturmak için HTML'i oluşturun, bir düzen oluşturma üzerine odaklanın | HTML'ye Giriş | Jen |
09 | Teraryum | CSS Uygulamada | Çevrimiçi teraryumu stilize etmek için CSS'i 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 sürükle/bırak arayüzü olarak çalıştırmak için JavaScript oluşturun, kapanışlara ve DOM manipülasyonuna odaklanarak | JavaScript Kapanışlar, DOM Manipülasyonu | Jen |
11 | Typing Game | 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 | Green Browser Extension | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihini ve bir tarayıcı uzantısının ilk öğelerini nasıl oluşturacağınızı öğrenin | Tarayıcılar Hakkında | Jen |
13 | Green Browser Extension | Form oluşturma, bir API çağırma ve değişkenleri yerel depolamada 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 | Green Browser Extension | 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 optimizasyonlar hakkında bilgi edinin | Arka Plan Görevleri ve Performans | Jen |
15 | Space Game | JavaScript ile Daha İleri Düzey Oyun Geliştirme | Bir oyun oluşturmaya hazırlık olarak hem Sınıflar hem de Kompozisyon kullanarak Kalıtım ve Yayın/Abone modelini öğrenin | İleri Düzey Oyun Geliştirmeye Giriş | Chris |
16 | Space Game | Tuval Üzerine Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | Tuval Üzerine Çizim | Chris |
17 | Space Game | Ekranda öğeleri hareket ettirme | Öğelerin Kartezyen koordinatları ve Canvas API'si kullanılarak nasıl hareket kazanabileceğini keşfedin | Öğeleri Hareket Ettirme | Chris |
18 | Space Game | Çarpışma Algılama | Öğelerin birbirine çarpması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 Algılama | Chris |
19 | Space Game | Puan Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | Puan Tutma | Chris |
20 | Space Game | Oyunu Bitirme ve Yeniden Başlatma | Varlıkları temizlemek ve değişken değerlerini sıfırlamak dahil olmak üzere oyunu bitirme ve yeniden başlatma hakkında bilgi edinin | Bitirme Koşulu | Chris |
21 | Banking App | 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 | Yohan |
22 | Banking App | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturma ve doğrulama rutinlerini yönetme hakkında bilgi edinin | Formlar | Yohan |
23 | Banking App | Veri Alma ve Kullanma Yöntemleri | Verilerin uygulamanıza nasıl girip çıktığını, nasıl alınacağını, saklanacağını ve elden çıkarılacağını öğrenin | Veri | Yohan |
24 | Banking App | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve bunu programlı olarak nasıl yöneteceğinizi öğrenin | Durum Yönetimi | Yohan |
🏫 Pedagoji
Müfredatımız iki temel pedagojik prensip üzerine tasarlanmıştır:
- proje tabanlı öğrenme
- sık sık yapılan kısa sınavlar
Program, JavaScript, HTML ve CSS'in temellerini, ayrıca günümüz web geliştiricilerinin kullandığı en son araçları ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal bir terrarium, çevre dostu bir tarayıcı uzantısı, uzay istilacı tarzı bir oyun ve işletmeler için bir bankacılık uygulaması oluşturarak pratik deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda, öğrenciler web geliştirme konusunda sağlam bir anlayış kazanmış olacaklar.
🎓 Bu müfredattaki ilk birkaç dersi Learn Path üzerinde Microsoft Learn'de 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 "Beginners Series to: JavaScript" video koleksiyonundan bir video ile eşleştirdik; bu koleksiyonun bazı yazarları bu müfredata katkıda bulunmuştur.
Ek olarak, sınıftan önce yapılan düşük riskli bir sınav, öğrencinin bir konuyu öğrenmeye yönelik niyetini belirlerken, sınıf sonrası yapılan ikinci bir sınav, kavramların daha fazla kalıcılığını sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamı veya bir kısmı alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek daha karmaşık hale gelir.
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: "Beginner Series to: Node.js".
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 depoyu çatallayın, Docsify'i yükleyin yerel makinenize ve ardından bu deponun kök klasöründe docsify serve
yazın. Web sitesi localhost'unuzda 3000 portunda sunulacaktır: localhost:3000
.
Tüm derslerin PDF'sini burada bulabilirsiniz.
🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Şunlara göz atın:
- Yeni Başlayanlar için Üretken Yapay Zeka
- Yeni Başlayanlar için Üretken Yapay Zeka .NET
- JavaScript ile Üretken Yapay Zeka
- Java ile Üretken Yapay Zeka
- Yeni Başlayanlar için Yapay Zeka
- 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 Etkili Kullanma
- C#/.NET Geliştiricileri için GitHub Copilot'u Etkili Kullanma
- Kendi Copilot Maceranızı Seçin
Lisans
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için LİSANS dosyasına bakın.
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ış yorumlamalardan sorumlu değiliz.