JavaScript ve CSS ile HTML Programlama Eğitimi

Eğitim Hakkında

Üç temel ön yüz teknolojisini bir arada, gerçek bir uygulama üzerinde

JavaScript ve CSS ile HTML Programlama Eğitimi, ön yüzün üç temel teknolojisini birlikte kullanarak etkileşimli arayüzler geliştirmeyi öğretir. Katılımcılar JavaScript temelleri, fonksiyon ve closure, DOM manipülasyonu ve olay yönetimini öğrenir. Ardından diziler, nesneler, Promise ve async-await, ES6+ ve hata ayıklama işlenir. Program CSS seçiciler, Flexbox, Grid, animasyon ve custom properties, ardından veriyle çalışan bir uygulama projesiyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; kısa anlatımın ardından tek bir etkileşimli uygulama parça parça geliştirilerek üç teknoloji birlikte uygulanır.

Seviye

Orta Seviye — HTML, CSS ve JavaScript üçlüsüyle etkileşimli ve dinamik web arayüzleri geliştirme programı

Öğrenme Metodu

Tek bir etkileşimli uygulama dört gün boyunca geliştirilir; her modülde JavaScript, CSS veya HTML'den yeni bir parça gerçek koda eklenir.

Neden Bu Eğitim?

🎯Üç teknoloji bir arada

HTML, CSS ve JavaScript'in nasıl birbirini tamamladığını tek bir gerçek uygulama üzerinde bütün olarak öğrenirsiniz.

🧩Etkileşim kurma

DOM ve olaylarla kullanıcı etkileşimini, CSS ile görsel geçişleri kurarak statik sayfaları canlı arayüzlere dönüştürürsünüz.

🚀Çatılara sağlam temel

Saf JavaScript ve modern CSS temeli, ileride React veya Vue öğrenirken sizi çok daha güçlü kılar.

Anahtar Konular

javascript eğitimicss eğitimihtml programlama kursudom eğitimiön yüz geliştirme eğitimijavascript dom kursuflexbox grid eğitimiasenkron javascript kursuweb programlama eğitimifrontend kursu

“HTML yapıyı, CSS görünümü, JavaScript davranışı verir; üçünü birlikte ustalıkla kullanmak ön yüzün özüdür.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak ön bilgi

1

HTML bilgisi

Temel etiketleri, form yapısını ve semantik düzeni rahatça kullanabilmek gerekir.

2

Temel CSS

Seçiciler, renk ve basit yerleşim gibi temel CSS konularına aşinalık öğrenmeyi hızlandırır.

3

Programlama mantığı

Değişken, koşul ve döngü gibi temel programlama kavramlarını tanımak faydalı olur; JavaScript baştan işlenir.

4

Geliştirme ortamı

VS Code ve güncel bir tarayıcının kurulu olması, konsolu kullanabilmek yeterlidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı JavaScript söz dizimini öğrenir, fonksiyon ve closure kavramını kavrar, DOM'u seçip günceller ve kullanıcı olaylarını yönetir.

Modül 1

JavaScript Dil Temelleri

let, const ve var ile değişken tanımı
Veri tipleri, tip dönüşümü ve karşılaştırma
Koşullu ifadeler ve switch yapısı
for, while ve for-of döngüleri
Operatörler ve şablon dizgileri kullanımı
strict mod ve yaygın tuzaklardan kaçınma

Modül 2

Fonksiyon, Kapsam ve Closure

Fonksiyon bildirimi ve ifade farkı
Ok fonksiyonları ve this davranışı
Parametre, varsayılan değer ve rest
Kapsam zinciri ve değişken erişimi
Closure kavramı ve pratik kullanımı
Geri çağrı ve callback fonksiyon mantığı

Modül 3

DOM Seçme ve Manipülasyon

querySelector ile öğe seçme yöntemleri
textContent ve innerHTML ile içerik yazma
createElement ve append ile öğe ekleme
classList ile sınıf ekleme ve kaldırma
style ve setAttribute ile öznitelik değişimi
Öğe kaldırma ve ağacı güncelleme

Modül 4

Olay ve Etkileşim Yönetimi

addEventListener ile olay dinleme
Olay nesnesi ve hedef öğe bilgisi
Olay yayılımı, bubbling ve capture
Olay delegasyonu ile verimli dinleme
preventDefault ve stopPropagation kullanımı
Klavye, fare ve form olaylarının yönetimi

Günün hedefiKatılımcı dizi ve nesnelerle veri işler, Promise ve async-await ile asenkron kod yazar, ES6+ özelliklerini ve hata ayıklamayı uygular.

Modül 1

Diziler ve Nesneler

map, filter ve reduce ile veri dönüştürme
forEach, find ve some ile dizi işlemleri
Nesne oluşturma ve özelliğe erişim
Yıkım ataması ile değer ayıklama
Spread ve rest ile kopyalama ve birleştirme
JSON ile nesne serileştirme ve ayrıştırma

Modül 2

Asenkron JavaScript

Eşzamansızlık ve olay döngüsü mantığı
Promise oluşturma, then ve catch
async ve await ile okunur asenkron akış
fetch ile API'den veri çekme ve işleme
Promise.all ile paralel istek yönetimi
Asenkron hata yakalama ile kararlı akış

Modül 3

ES6+ Özellikleri

Modüller, import ve export yapısı
Şablon dizgileri ve etiketli şablonlar
Map, Set ve koleksiyon yapıları
İsteğe bağlı zincirleme ve nullish birleşim
Sınıf söz dizimi ve kalıtım yapısı
Yineleyici ve generator kavramına giriş

Modül 4

Hata Yönetimi ve Debugging

try, catch ve finally ile hata yönetimi
throw ile özel hata nesnesi fırlatma
console metotlarıyla ayrıntılı günlük
Tarayıcı debugger ve kesme noktaları
Çağrı yığını ve hata izinin okunması
Yaygın hataların teşhis ve çözümü

Günün hedefiKatılımcı CSS seçici ve özgüllüğü kavrar, Flexbox ve Grid ile düzen kurar, geçiş ve animasyon ekler ve custom properties ile tasarımı yönetir.

Modül 1

Seçiciler ve Özgüllük

Sınıf, kimlik ve öznitelik seçicileri
Birleşik ve soy seçicilerin kullanımı
Sözde sınıf ve sözde öğe seçicileri
Özgüllük hesabı ve çakışma çözümü
Kaskad, kalıtım ve öncelik mantığı
Yeniden kullanılır sınıf tasarımı

Modül 2

Flexbox ve Grid ile Düzen

Flexbox ile tek eksende hizalama
flex-grow, shrink ve basis dengesi
Grid ile satır ve sütun şablonu
grid-template-areas ile alan tanımı
gap, hizalama ve öğe yerleştirme
Flexbox ile Grid arasında seçim

Modül 3

Geçiş, Dönüşüm ve Animasyon

transition ile yumuşak durum geçişi
transform ile taşıma, ölçek ve döndürme
keyframes ile çok adımlı animasyon
animation süresi, gecikme ve yinelemesi
Performanslı animasyon için uygun özellikler
prefers-reduced-motion ile erişilebilirlik

Modül 4

Responsive ve Custom Properties

Custom properties ile değişken tanımı
var ve fallback değer kullanımı
Media query ile duyarlı düzen kurma
Göreli birimler rem, em ve yüzde
Değişkenlerle tema ve koyu mod
clamp ile akışkan boyutlandırma

Günün hedefiKatılımcı JavaScript ile form doğrular, dinamik arayüz bileşenleri kurar, API verisini işleyip ekrana basar ve bütünleşik bir uygulama geliştirir.

Modül 1

JavaScript ile Form Doğrulama

Girdi değerini okuma ve kontrol etme
Doğrulama kuralları ve hata mesajı gösterimi
Anlık ve gönderimde doğrulama ayrımı
Erişilebilir hata duyurusu ve odaklama
Regex ile desen tabanlı doğrulama
Form gönderimini koddan yönetme

Modül 2

Dinamik Arayüz Bileşenleri

Sekme ve akordeon bileşeni kurma
Modal ve açılır menü durum yönetimi
Durum takibi ile arayüzü güncelleme
Olay delegasyonuyla dinamik öğe yönetimi
CSS sınıf değişimiyle görünür durum
Yeniden kullanılır bileşen yaklaşımı

Modül 3

Veri ile Çalışma

fetch ile API'den liste verisi çekme
Veriyi DOM'a dinamik olarak basma
Filtreleme ve sıralama ile görünüm
localStorage ile kullanıcı verisini saklama
Yükleniyor ve hata durumlarının yönetimi
Arama ile anlık liste güncelleme

Modül 4

Bütünleşik Proje

HTML iskeletinin semantik kurulması
CSS ile responsive ve temalı tasarım
JavaScript ile etkileşim ve veri akışı
Bileşenlerin tek uygulamada birleşmesi
Kod düzeni ve dosya organizasyonu
Projeyi gözden geçirme ve iyileştirme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

JavaScript temeli

Değişken, fonksiyon, closure ve döngü gibi temel JavaScript kavramlarını güvenle kullanarak mantık yazabilirsiniz.

✅

DOM ve olay yönetimi

DOM'u seçip güncelleyerek ve olayları dinleyerek kullanıcıyla etkileşen dinamik arayüzler geliştirebilirsiniz.

✅

Asenkron programlama

Promise ve async-await ile fetch kullanarak API'den veri çeker, asenkron akışı kararlı biçimde yönetirsiniz.

✅

Modern JavaScript

map, filter, modüller ve isteğe bağlı zincirleme gibi ES6+ özellikleriyle temiz ve güncel kod yazarsınız.

✅

CSS ile düzen

Flexbox ve Grid kullanarak esnek, responsive ve bakımı kolay sayfa düzenleri kurabilirsiniz.

✅

Animasyon ve tema

Geçiş, animasyon ve custom properties ile akıcı etkileşimler ve koyu mod gibi temalar oluşturabilirsiniz.

✅

Form ve bileşen

JavaScript ile form doğrular, sekme ve modal gibi yeniden kullanılabilir arayüz bileşenleri geliştirebilirsiniz.

✅

Uçtan uca uygulama

HTML, CSS ve JavaScript'i birleştirerek veriyle çalışan, etkileşimli bir web uygulamasını baştan sona kurabilirsiniz.

Kimler İçin Uygundur?

HTML ve CSS temeli olan
sayfalarına JavaScript ile etkileşim ve dinamizm katmak isteyen geliştiriciler
tasarımcılar
ön yüz geliştirmede orta seviyeye geçmek isteyen bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML ve CSS temeli olan, sayfalarına JavaScript ile etkileşim katmak isteyen geliştiriciler, tasarımcılar ve orta seviyeye geçmek isteyen öğrenciler için uygundur. İleri JavaScript deneyimi gerekmez; dil temelleri baştan işlenir.

Bir çatı mı öğretiliyor?

Hayır, eğitim React veya Vue gibi bir çatı değil, saf JavaScript ve modern CSS öğretir. Bu temel, ileride herhangi bir çatıya geçerken öğrenmeyi çok kolaylaştıran sağlam bir zemin kurar.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Tek bir etkileşimli uygulama dört gün boyunca parça parça geliştirilir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanır.

Hangi konular işleniyor?

JavaScript dil temelleri, fonksiyon ve closure, DOM ve olaylar, diziler ve nesneler, Promise ve async-await, ES6+, CSS seçiciler, Flexbox, Grid, animasyon, custom properties ve form doğrulama işlenir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen uygulama projesini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

JAVASCRIPT VE CSS İLE HTML PROGRAMLAMA EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

JavaScript Dil Temelleri

Fonksiyon, Kapsam ve Closure

DOM Seçme ve Manipülasyon

Olay ve Etkileşim Yönetimi

Diziler ve Nesneler

Asenkron JavaScript

ES6+ Özellikleri

Hata Yönetimi ve Debugging

Seçiciler ve Özgüllük

Flexbox ve Grid ile Düzen

Geçiş, Dönüşüm ve Animasyon

Responsive ve Custom Properties

JavaScript ile Form Doğrulama

Dinamik Arayüz Bileşenleri

Veri ile Çalışma

Bütünleşik Proje

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Salesforce ile HTML ve CSS Eğitimi

Tailwind CSS Eğitimi

Temel Web Programlama (HTML, CSS, JavaScript) Eğitimi

Web Apps with web2py: Working with Prebuilt Bootstrap Templates Eğitimi

Web Development Fundamentals - HTML and CSS Eğitimi

Web Development with HTML, CSS, and JavaScript Eğitimi