HTML CSS JavaScript Giriş Eğitimi

Eğitim Hakkında

HTML ile yapıdan CSS ile görünüme, JavaScript temelinden DOM etkileşimine akış

HTML with JavaScript & CSS: Introduction Eğitimi, modern web sayfasının üç temel katmanını birlikte ve doğru temelle öğretir. Katılımcılar semantik HTML ile sayfa yapısını kurar, CSS ile seçiciler, kutu modeli ve yerleşimi uygular. JavaScript temelleriyle değişken, fonksiyon ve denetim yapıları işlenir; ardından DOM seçimi, olaylar ve içerik güncellemeyle sayfa etkileşimli hale getirilir. Eğitim küçük, çalışan bir arayüzün uçtan uca üretimiyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; HTML, CSS ve JavaScript katmanları tek bir sayfa üzerinde adım adım bir araya getirilir.

Seviye

Orta Seviye — Semantik HTML, CSS ile görünüm ve JavaScript ile etkileşimi birlikte kurma

Öğrenme Metodu

Her modülde yazılan kod tarayıcıda anında görülür; üç katman tek bir arayüz üzerinde kademeli olarak uygulamaya dökülür.

Neden Bu Eğitim?

🧱Sağlam temel

HTML, CSS ve JavaScript'i birbirinden kopuk değil, bir sayfanın üç katmanı olarak öğrenerek kalıcı ve doğru bir temel kurarsınız.

🎨Görünür sonuç

Yazdığınız her kodun tarayıcıda anında karşılığını görerek kavramları soyut değil, somut ve uygulamalı biçimde öğrenirsiniz.

⚡Etkileşim kazanımı

DOM ve olaylarla statik sayfayı etkileşimli hale getirerek kullanıcıya yanıt veren canlı arayüzler kurmayı erken öğrenirsiniz.

Anahtar Konular

html eğitimicss eğitimijavascript eğitimiweb geliştirme giriş eğitimiön yüz geliştirme kursuhtml css javascript kursusıfırdan web geliştirmedom eğitimiweb tasarım temellerifrontend eğitimi

“HTML iskelet, CSS görünüm, JavaScript ise hayattır; üçünü birlikte anlamak, web geliştirmede sağlam yürümenin ilk adımıdır.”

Ön Koşullar

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

1

Bilgisayar kullanımı

Dosya ve klasör yönetimi gibi temel bilgisayar becerileri yeterlidir; önceden kod bilgisi gerekmez.

2

İngilizce aşinalık

Etiket ve komut adları İngilizce olduğundan temel İngilizce okuma rahatlığı süreci kolaylaştırır.

3

Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı gereklidir; canlı önizleme için eklenti önerilir.

4

Öğrenme isteği

Örnekleri birlikte yazıp denemek ve hatalardan öğrenmeye açık olmak eğitimden verim almanızı sağlar.

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ı HTML belge iskeletini kurar, semantik etiketlerle içeriği anlamlandırır, bağlantı ve medya ekler ve temel form öğelerini oluşturur.

Modül 1

Belge İskeleti ve Metin

doctype, html, head ve body yapısı
meta etiketleri ve karakter kodlaması
Başlık hiyerarşisi ve paragraf etiketleri
Liste türleri ile içeriğin düzenlenmesi
Satır içi ve blok öğe davranış ayrımı
Yorum satırı ve okunabilir biçimlendirme

Modül 2

Semantik Etiketler

header, nav, main ve footer bölümleri
article ve section ile içerik gruplama
aside ile yan içeriğin işaretlenmesi
figure ve figcaption ile görsel açıklama
Semantik yapının erişilebilirliğe katkısı
Arama motorları için anlamlı yapı

Modül 3

Bağlantı ve Medya

a etiketi ve href ile bağlantı türleri
img ile görsel ekleme ve alt metni
Göreli ve mutlak yol arasındaki fark
audio ve video ile medya gömme
İç bağlantılar ve sayfa içi hedefler
Dış kaynaklara güvenli bağlantı

Modül 4

Form Öğeleri ve Girişler

form, label ve input temel yapısı
input türleri ile metin ve sayı girişi
checkbox, radio ve select öğeleri
textarea ve button öğelerinin kullanımı
placeholder, required ve temel öznitelikler
Etiket ve alan eşlemesiyle erişilebilirlik

Günün hedefiKatılımcı CSS seçicileriyle öğeleri hedefler, kutu modelini kavrar, renk ve tipografiyi ayarlar ve temel yerleşim teknikleriyle sayfayı biçimlendirir.

Modül 1

Seçiciler ve Uygulama

Etiket, sınıf ve kimlik seçicileri
Satır içi, iç ve dış CSS tanımı
Birleşik ve alt öğe seçicileri
Özgüllük ve öncelik çakışma kuralları
Kalıtım ve devralınan özellikler
Kaskad mantığı ve çakışma çözümü

Modül 2

Kutu Modeli ve Boşluk

content, padding, border ve margin
box-sizing ile boyut hesabı farkı
Kenarlık, köşe ve gölge özellikleri
Genişlik, yükseklik ve taşma davranışı
Margin çökmesi ve boşluk yönetimi
display ile blok ve satır içi davranış

Modül 3

Renk ve Tipografi

Renk gösterimi hex, rgb ve hsl
Arka plan rengi ve görsel ayarı
font-family ve web yazı tipleri
font-size, font-weight ve line-height
Metin hizalama ve harf aralığı
Okunabilirlik için tipografi ilkeleri

Modül 4

Temel Yerleşim Teknikleri

Normal akış ve blok sıralaması
position ile statik ve göreli konum
display flex ile basit hizalama
Flexbox ile yatay ve dikey ortalama
Basit media query ile uyarlama
Boşluk ve ritimle düzenli görünüm

Günün hedefiKatılımcı JavaScript ile değişken ve veri tiplerini kullanır, fonksiyon yazar, denetim yapılarıyla akışı yönetir ve dizi ile nesneleri işler.

Modül 1

Değişken ve Tipler

let, const ve değişken kapsamı
Sayı, metin ve boolean tipleri
Metin şablonları ve birleştirme
null, undefined ve tip dönüşümü
Operatörler ve ifade değerlendirme
Değer ve referans davranış farkı

Modül 2

Fonksiyonların Kullanımı

Fonksiyon tanımlama ve çağırma biçimi
Parametre ve dönüş değeri kullanımı
Ok fonksiyonu ve kısa sözdizimi
Varsayılan parametre değerleri
Kapsam ve değişken erişim kuralları
Fonksiyonları değer olarak kullanma

Modül 3

Denetim Akışı Yapıları

if, else if ve else karar dalları
Karşılaştırma ve mantıksal operatörler
switch ile çoklu durum seçim yapısı
for, while ve do-while döngüleri
break ve continue ile döngü kontrolü
Koşullu ifade ve kısa devre mantığı

Modül 4

Dizi ve Nesneler

Dizi oluşturma ve elemana erişim
push, pop ve temel dizi metotları
forEach, map ve filter ile dolaşma
Nesne tanımı ve özellik erişimi
Nesne ve dizinin iç içe kullanımı
JSON ile nesnenin metne dönüşü

Günün hedefiKatılımcı DOM ile öğeleri seçer, olayları dinler, içerik ve stili günceller ve öğrendiği üç katmanı küçük, çalışan bir uygulamada birleştirir.

Modül 1

DOM ile Öğe Seçimi

querySelector ile tekil öğe seçme
querySelectorAll ile öğe listesi
Öğe içeriğine ve metin düğümüne erişim
classList ile sınıf ekleme çıkarma
Öznitelik okuma ve değiştirme işlemi
DOM ağacı ve öğeler arası ilişkiler

Modül 2

Olaylar ve Dinleyiciler

addEventListener ile olay dinleme
click, input ve submit olayları
event nesnesi ve olay hedef öğesi
preventDefault ile varsayılanı durdurma
Olay yayılımı ve temsili dinleme
Klavye ve fare olaylarının yakalanması

Modül 3

İçerik Güncelleme

textContent ile metin güncelleme
Yeni öğe oluşturup DOM'a ekleme
Var olan bir öğeyi DOM'dan kaldırma
Stil ve sınıfın koşullu değişimi
Liste öğelerinin dinamik üretimi
Görünürlüğü koşullu olarak değiştirme

Modül 4

Mini Uygulama Projesi

HTML iskeleti ve form kurulumu
CSS ile düzen ve görünümün tamamlanması
JavaScript ile girişlerin işlenmesi
Olaylarla liste ekleme ve silme
Basit doğrulama ve geri bildirim
Üç katmanın tek arayüzde birleşimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Semantik HTML

HTML belge iskeletini kurar, semantik etiketlerle içeriği anlamlandırır ve erişilebilir, arama dostu sayfa yapıları oluşturursunuz.

✅

Form yapısı

input, label ve çeşitli form öğeleriyle erişilebilir formlar kurar, temel öznitelikleri doğru biçimde uygulamayı öğrenirsiniz.

✅

CSS seçiciler

Etiket, sınıf ve kimlik seçicilerini özgüllük ve kaskad mantığıyla kullanarak öğeleri doğru biçimde hedefler ve biçimlendirirsiniz.

✅

Kutu modeli

Kutu modelini, box-sizing davranışını ve boşluk yönetimini kavrayarak öğelerin boyut ve aralıklarını isabetli biçimde kontrol edersiniz.

✅

Temel yerleşim

Normal akış, position ve Flexbox ile öğeleri hizalar ve basit media query ile sayfayı farklı ekranlara uyarlamayı öğrenirsiniz.

✅

JavaScript temeli

Değişken, tip, fonksiyon ve denetim yapılarını kullanır, dizi ve nesnelerle veriyi işleyerek program mantığını kurmayı öğrenirsiniz.

✅

DOM ve olaylar

DOM ile öğeleri seçer, olayları dinler ve içerik ile stili güncelleyerek kullanıcıya yanıt veren etkileşimli sayfalar kurarsınız.

✅

Bütünleşik proje

HTML, CSS ve JavaScript katmanlarını tek bir arayüzde birleştirerek küçük ama baştan sona çalışan bir uygulama geliştirirsiniz.

Kimler İçin Uygundur?

Web geliştirmeye sağlam bir temelle başlamak isteyenler
HTML
CSS
JavaScript'i birlikte kavramak isteyen yeni geliştiriciler ve ön yüz bilgisini sistematik tazelemek isteyen ekip üyeleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web geliştirmeye sağlam bir temelle başlamak isteyenler, HTML, CSS ve JavaScript'i birlikte kavramak isteyen yeni geliştiriciler ve ön yüz bilgisini sistematik tazelemek isteyen ekip üyeleri için uygundur. Önceden kod bilgisi gerekmez; temel bilgisayar kullanımı yeterlidir.

Önceden programlama bilmek gerekiyor mu?

Hayır. Eğitim sıfırdan başlar; dosya yönetimi gibi temel bilgisayar becerileri yeterlidir. HTML yapısından başlayıp CSS ile görünüme ve JavaScript ile mantığa kademeli geçilir. Her kavram tarayıcıda anında görülen örneklerle pekiştirildiği için önceden kod bilgisi gerekmez.

Eğitim sonunda gerçek bir şey yapabilecek miyim?

Evet. Son günde HTML, CSS ve JavaScript birlikte kullanılarak küçük ama baştan sona çalışan etkileşimli bir arayüz geliştirilir. Form girişlerini işleyen, liste ekleyip silen ve kullanıcıya geri bildirim veren bu mini proje, öğrenilen üç katmanı tek bir uygulamada birleştirir.

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. HTML, CSS ve JavaScript katmanları tek bir sayfa üzerinde adım adım bir araya getirilir. Yüz yüze veya online yapılabilir; içerik kurumun hedef kitlesine ve tempoya göre uyarlanabilir.

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 mini projeyi 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

HTML WITH JAVASCRIPT & CSS: INTRODUCTION EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Belge İskeleti ve Metin

Semantik Etiketler

Bağlantı ve Medya

Form Öğeleri ve Girişler

Seçiciler ve Uygulama

Kutu Modeli ve Boşluk

Renk ve Tipografi

Temel Yerleşim Teknikleri

Değişken ve Tipler

Fonksiyonların Kullanımı

Denetim Akışı Yapıları

Dizi ve Nesneler

DOM ile Öğe Seçimi

Olaylar ve Dinleyiciler

İçerik Güncelleme

Mini Uygulama Projesi

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Modernizing CSS Skills Eğitimi

Responsive Web Tasarımı Eğitimi

Sass (Syntactically Awesome Style Sheets) Eğitimi

Temel Seviye HTML Eğitimi

Temel ve İleri Seviye HTML Eğitimi

Advanced Options & Responsive Web Design Eğitimi