HTML CSS JavaScript Eğitimi TT4003

Eğitim Hakkında

Semantik HTML'den CSS yerleşimine, JavaScript diline ve DOM etkileşimine uzanan bütüncül akış

Introduction to HTML, CSS and JavaScript (TT4003) Eğitimi, web geliştirmenin üç temel teknolojisini bir arada öğretir. Katılımcılar HTML ile semantik yapıyı, CSS ile yerleşim ve görünümü, JavaScript ile de değişken, fonksiyon, koşul ve döngü gibi dil temellerini öğrenir. Program DOM seçimi, olay yönetimi ve form doğrulama ile sayfaya etkileşim kazandırmayı kapsar. Eğitim sonunda katılımcı üç teknolojiyi birleştiren dinamik ve etkileşimli bir web uygulaması geliştirir.

Süre ve Format

4 Gün. Her gün dört modül; HTML, CSS ve JavaScript sırayla işlenir ve son gün üçünü birleştiren etkileşimli bir proje tamamlanır.

Seviye

Orta Seviye — HTML yapısı, CSS stili ve JavaScript etkileşimini birlikte kullanarak dinamik sayfa kurma

Öğrenme Metodu

Her teknoloji anlatıldıktan sonra tarayıcıda uygulanır; konular tek bir proje üzerinde katman katman birleştirilerek pekiştirilir.

Neden Bu Eğitim?

🧱Üç temel bir arada

Web'in yapı, görünüm ve davranış katmanlarını birlikte öğrenerek her üç teknolojinin nasıl uyum içinde çalıştığını kavrarsınız.

⚙️Etkileşimli sayfa

JavaScript ile DOM ve olayları kullanarak statik sayfaları kullanıcıya yanıt veren dinamik arayüzlere dönüştürürsünüz.

🚀Sağlam temel

Framework öğrenmeden önce dilin ve tarayıcının temellerini kavrayarak sonraki teknolojilere güçlü bir zemin hazırlarsınız.

Anahtar Konular

html css javascript eğitimiweb geliştirme eğitimijavascript eğitimiön yüz geliştirme kursudom eğitimifrontend eğitimijavascript dom eğitimiweb programlama eğitimitt4003 eğitimiflexbox eğitimi

“HTML yapıyı, CSS görünümü, JavaScript ise davranışı kurar; bu üçünü birlikte öğrenmek web geliştirmenin gerçek anahtarıdır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam

1

Temel bilgisayar

Dosya yönetimi ve uygulama kurma gibi temel bilgisayar becerileri eğitime başlamak için yeterlidir.

2

HTML'e aşinalık

Temel HTML etiketlerini daha önce görmüş olmak faydalıdır; eğitim konuları baştan tekrar ederek ilerler.

3

Mantıksal düşünme

Adım adım problem çözme alışkanlığı JavaScript bölümünde kavramları kolaylaştırır.

4

Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı, canlı önizleme ile uygulama yapmak için gereklidir.

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ı semantik HTML yapısını kurar; metin, medya, liste, tablo ve form etiketlerini kullanarak erişilebilir bir sayfa iskeleti oluşturur.

Modül 1

Belge ve Semantik Yapı

doctype, head, body ve meta tanımları
header, nav, main, section ve footer kullanımı
Başlık hiyerarşisi ve içerik düzeni
Semantik etiketlerin erişilebilirliğe katkısı
Blok ve satır içi öğeler arasındaki fark
Geçerli HTML ve doğrulama araçları

Modül 2

Metin ve Bağlantılar

Paragraf, başlık ve vurgulama etiketleri
a etiketi ile iç, dış ve çapa bağlantılar
Listeler ul, ol ve tanım listeleri
blockquote ve cite ile alıntı yapısı
Karakter varlıkları ve özel semboller
Metin içeriğinin erişilebilir düzeni

Modül 3

Medya ve İçerik Gömme

img, srcset ile responsive görseller
figure, figcaption ile görsel açıklama
audio ve video etiketleri ve kontroller
iframe ile dış içerik gömme ve güvenlik
SVG ve vektörel görsel kullanımı
Medya için alt metin ve erişilebilirlik

Modül 4

Formlar ve Girdiler

form etiketi, action, method ve enctype
input türleri, label ve placeholder
select, textarea ve fieldset kullanımı
required, pattern ile HTML5 doğrulama
Form erişilebilirliği ve odak yönetimi
Gönderme ve veri gruplama mantığı

Günün hedefiKatılımcı CSS seçicileri ve kutu modelini uygular; Flexbox ile yerleşim kurar ve media query ile sayfayı farklı ekranlara uyumlu hale getirir.

Modül 1

Seçiciler ve Özgüllük

Etiket, class, id ve öznitelik seçicileri
Birleşik ve soy seçiciler combinator
Pseudo-class hover, focus ve nth-child
Pseudo-element before ve after kullanımı
Özgüllük specificity hesaplama kuralları
Cascade ve inheritance mantığı

Modül 2

Kutu Modeli ve Görünüm

content, padding, border ve margin
box-sizing ve border-box kullanımı
Renk, arka plan ve gradyan tanımı
Tipografi, font ve satır yüksekliği
display türleri block, inline ve none
overflow ve görünürlük davranışı

Modül 3

Flexbox ile Yerleşim

display flex ve ana eksen kavramı
justify-content ile yatay hizalama
align-items ile dikey hizalama
flex-direction ve flex-wrap ile akış
flex-grow, shrink ve basis ile esneklik
gap ile öğeler arası boşluk yönetimi

Modül 4

Responsive ve Konumlandırma

position static, relative, absolute, fixed
z-index ve katman sıralama yönetimi
media query ile kesme noktaları
Göreli birimler rem, em, vw ve clamp
Mobil öncelikli yaklaşım mantığı
Responsive görsel ve esnek düzen

Günün hedefiKatılımcı JavaScript değişken ve veri tiplerini, operatörleri, koşul ve döngüleri ve fonksiyonları kullanarak temel programlama mantığını kurar.

Modül 1

Değişken ve Veri Tipleri

let, const ve var arasındaki fark
string, number, boolean temel tipler
null, undefined ve typeof operatörü
Tip dönüşümü ve otomatik coercion
Template literal ve string yöntemleri
Değişken kapsamı ve hoisting kavramı

Modül 2

Operatörler ve Koşullar

Aritmetik ve atama operatörleri
Karşılaştırma == ile === farkı
Mantıksal operatörler and, or, not
if, else if ve else koşul yapısı
switch ile çoklu durum dallanması
Ternary ve kısa devre değerlendirme

Modül 3

Döngüler ve Diziler

for ve while ile döngü yapıları
Dizi oluşturma ve indeks ile erişim
push, pop, shift ve splice yöntemleri
for of ile dizi üzerinde gezinme
map, filter ve forEach tanıtımı
Nesneler ve anahtar-değer yapısı

Modül 4

Fonksiyonlar ve Parametreler

Fonksiyon tanımı ve çağırma biçimi
Parametre, argüman ve dönüş değeri
Arrow function ve kısa sözdizimi
Fonksiyon kapsamı ve closure tanıtımı
Varsayılan parametre ve rest parametre
Fonksiyonlarla kod tekrarını azaltma

Günün hedefiKatılımcı DOM ile elemanları seçip değiştirir, olayları yönetir ve form doğrulamayla üç teknolojiyi birleştiren etkileşimli bir proje geliştirir.

Modül 1

DOM Seçimi ve Değiştirme

querySelector ve querySelectorAll
getElementById ve sınıf ile seçim
textContent ve innerHTML güncelleme
setAttribute ve classList yönetimi
Eleman oluşturma ve appendChild
DOM ağacı ve düğümler arası gezinme

Modül 2

Olay Yönetimi Temelleri

addEventListener ile olay dinleme
click, input ve change olayları
Olay nesnesi event ve target erişimi
Olay yayılımı bubbling ve capture
preventDefault ile varsayılanı durdurma
Olay delegasyonu ile verimli dinleme

Modül 3

Form Doğrulama ve Etkileşim

Form değerlerini JavaScript ile okuma
Girdi doğrulama ve hata mesajı gösterme
Dinamik içerik ekleme ve silme
Stil ve sınıfları JavaScript ile değiştirme
setTimeout ve setInterval ile zamanlama
localStorage ile basit veri saklama

Modül 4

Proje: Etkileşimli Uygulama

Proje yapısının HTML ile kurulması
CSS ile responsive görünüm verilmesi
JavaScript ile işlevselliğin eklenmesi
Kullanıcı girdisiyle dinamik güncelleme
Hata ayıklama ve geliştirici araçları
Projenin test edilip tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Semantik HTML

Semantik etiketlerle erişilebilir ve geçerli bir sayfa yapısını baştan sona doğru biçimde kurabilirsiniz.

✅

CSS yerleşim

Kutu modeli ve Flexbox ile düzen kurar, media query kullanarak farklı ekranlara uyumlu arayüzler tasarlarsınız.

✅

JavaScript temeli

Değişken, tip, koşul, döngü ve fonksiyon kavramlarını kullanarak temel programlama mantığını JavaScript ile uygularsınız.

✅

DOM yönetimi

querySelector ve DOM yöntemleriyle sayfa öğelerini seçer, içeriklerini ve stillerini dinamik olarak değiştirirsiniz.

✅

Olay yönetimi

addEventListener ile kullanıcı olaylarını dinler ve sayfaya tıklama, girdi gibi etkileşimlere yanıt kazandırırsınız.

✅

Form doğrulama

Form verilerini JavaScript ile okuyup doğrular, kullanıcıya anlamlı hata mesajları gösteren akışlar kurarsınız.

✅

Üçünü birleştirme

HTML, CSS ve JavaScript'i tek bir projede katman katman birleştirerek bütüncül bir arayüz geliştirirsiniz.

✅

Etkileşimli uygulama

Kullanıcı girdisiyle güncellenen, dinamik ve etkileşimli bir web uygulamasını baştan sona kendiniz geliştirirsiniz.

Kimler İçin Uygundur?

Web geliştirmeye sağlam bir başlangıç yapmak isteyen geliştiriciler
HTML
CSS bilgisine JavaScript eklemek isteyenler ve ön yüz geliştirme kariyerine yönelmek isteyen öğrenciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web geliştirmeye sağlam başlangıç yapmak isteyen geliştiriciler, HTML ve CSS bilgisine JavaScript eklemek isteyenler ve ön yüz kariyerine yönelmek isteyen öğrenciler için uygundur. Temel bilgisayar becerileri yeterlidir.

JavaScript öğrenmek için önceden programlama bilmek gerekir mi?

Hayır, eğitim JavaScript'i sıfırdan ele alır. Değişken, koşul, döngü ve fonksiyon gibi temeller adım adım işlenir. Adım adım problem çözme alışkanlığı kavramları kolaylaştırır ancak ön koşul değildir.

Eğitimde hangi konular işleniyor?

Birinci gün semantik HTML, ikinci gün CSS seçiciler ve Flexbox yerleşimi, üçüncü gün JavaScript dil temelleri, dördüncü gün DOM, olay yönetimi ve form doğrulama işlenir. Son gün üç teknolojiyi birleştiren bir proje yapılır.

Eğitim online olarak alınabilir mi?

Evet, eğitim hem online hem yüz yüze verilebilir ve kurumsal taleplere göre uyarlanır. Her iki formatta da katılımcı kendi bilgisayarında kod yazarak canlı önizleme ile uygulama yapar.

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, katılımcının üç teknolojiyi uygulamalı olarak kullandığını belgeler.

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

INTRODUCTION TO HTML, CSS AND JAVASCRIPT (TT4003) EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Belge ve Semantik Yapı

Metin ve Bağlantılar

Medya ve İçerik Gömme

Formlar ve Girdiler

Seçiciler ve Özgüllük

Kutu Modeli ve Görünüm

Flexbox ile Yerleşim

Responsive ve Konumlandırma

Değişken ve Veri Tipleri

Operatörler ve Koşullar

Döngüler ve Diziler

Fonksiyonlar ve Parametreler

DOM Seçimi ve Değiştirme

Olay Yönetimi Temelleri

Form Doğrulama ve Etkileşim

Proje: Etkileşimli Uygulama

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

HTML Eğitimi

HTML Grafik ve Animasyon Teknikleri Eğitimi

HTML ile İnteraktif Web Sayfaları Tasarımı Eğitimi

HTML ve API Kullanımı ile Gelişmiş Uygulamalar Eğitimi

HTML ve CSS3'e Giriş Eğitimi

İleri Seviye HTML Eğitimi