Web sitesi oluşturma Ön uç geliştirme - Çocuklara yönelik çevrimiçi programlama okulundan ücretsiz kurs Merhaba Dünya, 44 saat eğitim, Tarih: 3 Aralık 2023.

İnternet nasıl çalışır?

İnternetin temel kavramları ve mimarisi hakkında konuşalım. Domain, hosting, istemci-sunucu mimarisinin ne olduğunu öğrenelim. Çalışma ortamını kuralım ve Ön Uç geliştirmenin üç temel direği olan HTML, CSS ve JavaScript hakkında konuşalım.

HTML

HTML Belge Yapısı

İlk HTML sayfalarını oluşturalım ve basit ve karmaşık web sayfası örneklerine bakalım. Sayfamızda hangi blokların olması gerektiğini bulalım. Sayfalarımızı birbirine bağlayalım, metnin hiper metinden nasıl farklı olduğunu, etiketlerin ve niteliklerin neler olduğunu öğrenelim.

Metinle çalışma

HTML'deki metinle nasıl doğru çalışılacağını öğrenelim: metni paragraflara ayırın, başlıkları ve alt başlıkları belirtin. Numaralı ve madde işaretli listeler yapmayı ve klasiklerden alıntılar yapmayı öğrenelim.

Bağlantılar ve resimler

Bağlantıları daha ayrıntılı olarak tanıyalım ve ayrıca resim eklemeyi ve bunları bağlantı olarak kullanmayı öğrenelim.

Tablo düzeni

İlk tablomuzu oluşturalım ve hangi etiketlerden oluştuğunu öğrenelim. Hücreleri birleştirmeyi, satır ve sütun sayısını değiştirmeyi, metni hizalamayı ve çok daha fazlasını nasıl yapacağımızı öğrenelim. Ayrıca tasarımcıdan masanızı nasıl güzelleştireceğinize dair temel ipuçlarını da öğreneceğiz.

Formlara Giriş

İlk formumuzu oluşturalım, giriş alanları, açılır listeler, onay kutuları ve tabii ki düğmelerle nasıl çalışılacağını öğrenelim. Gelecekte işimize yarayacak diğer form öğelerini inceleyelim.

CSS

CSS'ye giriş

CSS'nin ne olduğunu ve nasıl kullanılacağını hatırlayalım. HTML sayfalarıyla çalışırken CSS'yi nasıl kullanacağımızı öğrenelim. CSS'nin sözdizimini, seçicilerin ne olduğunu, kalıtımını ve stillerimizin bir HTML belgesine hangi öncelikle uygulandığını inceleyelim.

Seçiciler

Seçicileri daha ayrıntılı olarak inceleyelim. Bir veya daha fazla öğeye nasıl erişeceğimizi, bir sınıf ile sözde sınıf ve sözde öğeden bir öğe arasındaki farkın ne olduğunu öğrenelim. Gelin CSS yönergelerine bir göz atalım ve insanların röportajlarda CSS hakkında ne sormaktan hoşlandıklarını öğrenelim.

Kalıtım, basamaklandırma ve öncelik

Bodurluk ile dublörün aynı alandan olmadığını öğreniyoruz. CSS stillerinin HTML öğelerine uygulanma ilkelerini anlayalım.

Metin dekorasyonu

Başladığımız yere, metne dönelim. CSS özelliklerini kullanarak metnimizi nasıl güzel ve kullanıcı dostu hale getireceğimizi öğrenelim: kalınlık, italik, boyut, renk, arka plan ve diğerleri.

Belge modelini engelle

Div ve span etiketlerinin yanı sıra öğe boyutlarının, dolgunun ve kenarlıkların nasıl ayarlanacağını öğrenelim. Bir belgenin blok modelinin nasıl oluştuğunu ve elemanları konumlandırmak için hangi yeteneklere sahip olduğumuzu anlayalım.

JavaScript

JavaScript'e Giriş

Ön uç geliştirmenin üçüncü ayağı olan JavaScript ile tanışalım. Değişkenlerin ne olduğunu, veri türlerini ve neden gerekli olduklarını öğrenelim. Ve elbette ilk programımızı yazacağız.

Koşullar

Mantığı, mantıksal işlemleri ve bunların kombinasyonlarını hatırlayalım. Güç ve kontrol bizimle olsun.

Döngüler

Az kod yazarken çok şey yapmayı öğrenelim. Döngü içindeki döngünün basit olduğunu ancak dikkatli olmanız gerektiğini anlayalım.

Diziler

Buz kütleleri var, ormanlar var, programlamada diziler var. Bu derste bunların ortak noktalarını ve nasıl farklı olduklarını inceleyeceğiz. İpucu - önceki dersteki döngüler bize çok yardımcı olacaktır.

Fonksiyonlar

Değişkenler ve onlar için doğru ad, programlamanın ABC'si ise, o zaman işlevlerle çalışma ve onlar için uygun adları seçme yeteneği zaten bir reçetedir. Bu derste bir programı mantıksal bloklara nasıl ayıracağımızı ve bunun neden önemli olduğunu öğreneceğiz.

Nesneler

Nesneler, yöntemler kavramıyla tanışacağız ve OOP ilkelerini tanımaya başlayacağız.

DOM'a giriş

Bir HTML belgesiyle etkileşime giremezse JavaScript işe yaramaz olurdu. DOM'un (Belge Nesne Modeli) ne olduğunu öğreneceğiz, ancak daha da önemlisi JavaScript aracılığıyla HTML ve CSS ile nasıl çalışacağımızı öğreneceğiz.

Olay işleme

Şimdi bunu bir sonraki seviyeye taşıyacağız ve JavaScript kullanarak kullanıcıya nasıl tepki vereceğimizi ve onunla nasıl etkileşim kuracağımızı öğreneceğiz. Ayrıca JavaScript olaylarının neden kabarcıklanıp batabileceğini de öğreneceğiz.

HTML5 ve CSS3

HTML5: Yenilikler neler ve neden?

HTML5'te hangi değişikliklerin meydana geldiğini ve nedenini öğrenelim. Yeni unsurları inceleyelim ve bunların doğru kullanım durumlarını analiz edelim.

Konumlandırma Elemanları ve Izgara

Sayfaları yapılandırmanın ve öğeleri üzerlerine yerleştirmenin yeni yollarına bakalım.

HTML5 formları

Gücün karanlık tarafını keşfedelim ve HTML5'teki yeni formların yanı sıra eski formlarda yapılan değişikliklerle pratik yapalım. Tarihleri, renkleri, sayıları girmek ve kullanıcının hayatını biraz daha kolaylaştırmasını sağlamak için yeni alan türleriyle çalışalım.

Ses ve video

Bu eğitimde hem DJ hem de editör sizsiniz. Bu derste kendi Youtube'umuzu yapmaya vaktimiz olmayacak ancak temel işlevselliğe sahip bir prototip oluşturmak için çok çalışacağız.

CSS3'te metinle çalışma

Standardın son sürümünde metin biçimlendirme konusunda ne gibi fırsatlar ve öneriler bulunduğunu öğrenelim.

CSS3'te Geçiş ve Dönüşüm Efektleri

CSS3 kullanarak animasyon ve çeşitli efektlerin nasıl oluşturulacağını öğrenelim. Bu tür efektleri yaratırken tuzakları tanıyalım.

Uyarlanabilir düzen

Neden uyarlanabilir bir şekilde düzenleme yapmanız gerektiğini ve bunun ne zaman gereksiz olduğunu ve zarar verebileceğini öğrenelim. Temel sözdizimine bakalım ve elbette uyarlanabilir düzen üzerinde çalışalım.

Flexbox ve CSS Izgarası

Blok düzenine yönelik modern yaklaşımların yanı sıra bunları kullanmanın ne gibi zorlukları olduğunu öğreneceğiz.

CSS ön işlemcileri: LESS ve SASS

CSS'de değişkenleri kullanmak ister misiniz? Kolayca! CSS ön işlemcilerini kullanarak ne gibi ilginç şeyler yapabileceğinizi öğrenin.

JavaScript yeni bir seviyede

ES-2015+

Modern JavaScript nedir, "katı mod" ve bunlarla nasıl yaşanır.

JavaScript'te OOP

Modern JavaScript'te sınıfların nasıl yapılandırıldığını ve her şey işlevler kullanılarak yapılabiliyorsa neden kullanıldığını inceleyelim. Kalıtımın nasıl çalıştığı ve JS'de sınıf oluşturmanın başka yolları nelerdir?

Ayrıntılı işlevler

Fonksiyon Bildirgesi ve Fonksiyon İfadesinin ne olduğunu öğrenelim, bir fonksiyonu isimsiz çağırmayı öğrenelim. “Bağlam bağlama” ifadesine bakalım.

AJAX ve JSON

Geliştiriciler olarak kendimizi yeni bir seviyeye taşıyalım, HTTP isteklerinin nasıl yapılacağını öğrenelim ve sunucu ile istemcinin kavga etmeden birbirleriyle nasıl iletişim kurabileceğini öğrenelim.

Düzenli ifadeler

"Eğer bir sorununuz varsa ve bunu düzenli ifadelerle çözecekseniz, o zaman zaten iki sorununuz var demektir." Düzenli ifadeler kullanarak ayağınıza kurşun sıkmaktan nasıl kaçınacağınızı öğrenelim.

İnşaatçılar, görev çalıştırıcıları ve bağımlılık yönetimi

Bower, npm, gulp, Grunt, webpack ve co. Bunda karmaşık bir şey yok, ancak çözmeniz gerekecek.

JavaScript'te test etme

Kodun olduğu yerde her zaman hatalar vardır. Sayılarını nasıl en aza indireceğinizi ve bu konuda bize hangi uygulama ve araçların yardımcı olacağını öğreneceksiniz.

Algoritmalar

Daha sonra işlemci ve tarayıcının programınızı başlatırken dayanılmaz bir acı yaşamaması için nasıl kod yazacağımızı öğreneceğiz.

ReactJS

ReactJS'ye Giriş

ReactJS'i tanıyalım, basit bileşenlerin nasıl yazılacağını öğrenelim ve onu diğer popüler çerçevelerle karşılaştıralım. Sanal DOM kavramını tanıyalım.

React uygulamalarının mimarisi ve konfigürasyonu

Sadece React'te yazmak için değil, aynı zamanda bunu olabildiğince verimli ve rahat bir şekilde yapabilmek için hangi eylemleri gerçekleştirmemiz gerektiğini öğrenelim.

ReactJS'de ilk uygulamayı oluşturma

JSX, ReactComponent, ReactDOM.render, Render fonksiyonuna daha yakından bakalım. İlk uygulamayı yapılandırıp başlatıyoruz, bileşenler ve süreç olayları arasında ilişkiler kuruyoruz.

Yönlendirme ve ReactJS

Yönlendirme nedir; ReactRouter ve işlevselliğini tanıyalım; Uygulamamızda yönlendirmeleri düzenliyoruz.