Web Development HTML CSS JavaScript Eğitimi

Eğitim Hakkında

HTML yapısından CSS düzenine ve JavaScript etkileşimine uçtan uca ön yüz geliştirme

Web Development with HTML, CSS, and JavaScript Eğitimi, modern ön yüz geliştirmenin üç temel teknolojisini bir arada, uygulamalı olarak öğretir. Katılımcılar semantik HTML ile sağlam belge yapısı kurar, CSS box model, Flexbox, Grid ve media query ile responsive düzen tasarlar. JavaScript dil temelleri, DOM manipülasyonu, olay yönetimi ve fetch ile asenkron veri işlenir. Program gerçek bir etkileşimli uygulama geliştirerek üç teknolojiyi tek bütünde birleştirir.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımların ardından tek bir etkileşimli web uygulaması parça parça kodlanarak geliştirilir.

Seviye

Orta Seviye — HTML, CSS ve JavaScript ile modern ve etkileşimli web arayüzleri geliştirme programı

Öğrenme Metodu

Tek bir web uygulaması üç gün boyunca geliştirilir; her modülde HTML, CSS veya JavaScript'ten yeni bir parça gerçek koda eklenir.

Neden Bu Eğitim?

🧱Sağlam ön yüz temeli

Semantik HTML, modern CSS ve saf JavaScript ile çatılara geçmeden önce ön yüzün özünü kavrayarak kalıcı bir temel kurarsınız.

📱Responsive tasarım

Flexbox, Grid ve media query ile her ekran boyutunda düzgün görünen, mobil uyumlu arayüzler tasarlamayı öğrenirsiniz.

⚡Etkileşim ve dinamizm

DOM, olaylar ve fetch ile kullanıcıyla etkileşen, veriyle çalışan dinamik sayfalar geliştirme becerisi kazanırsınız.

Anahtar Konular

web geliştirme eğitimihtml css javascript kursuön yüz geliştirme eğitimifrontend eğitimiresponsive tasarım kursuflexbox grid eğitimijavascript dom kursuweb tasarım eğitimiweb programlama kursusıfırdan web geliştirme

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

Ön Koşullar

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

1

Temel bilgisayar kullanımı

Dosya ve klasör yönetimi ile internet tarayıcısını rahat kullanabilmek yeterlidir; konular sıfırdan işlenir.

2

Programlama mantığı

Değişken, koşul ve döngü gibi temel kavramları tanımak faydalıdır; JavaScript bölümünde baştan anlatılır.

3

Geliştirme ortamı

VS Code gibi bir editör ve güncel bir tarayıcının kurulu olması, konsolu açabilmek gerekir.

4

Öğrenme isteği

Kodu birebir yazarak denemeye açık olmak, uygulamalı akıştan en yüksek verimi 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ı semantik HTML ile sağlam belge yapısı ve erişilebilir formlar kurar, CSS box model, seçiciler, renk ve tipografi ile temel stilleri uygular.

Modül 1

Semantik HTML ve Belge Yapısı

DOCTYPE, head ve meta etiketleriyle iskelet
header, nav, main, section ve footer kullanımı
article ve aside ile anlamsal bölümleme
Başlık hiyerarşisi ve metin etiketleri
Bağlantı, görsel ve alt metin kullanımı
Geçerli ve erişilebilir işaretleme ilkeleri

Modül 2

Formlar ve Erişilebilirlik

form, label ve input ilişkisinin kurulması
text, email, number ve date girdi türleri
select, checkbox ve radio kullanımı
required, pattern ile HTML doğrulama
fieldset ve legend ile gruplama
aria öznitelikleriyle erişilebilir formlar

Modül 3

CSS Temelleri ve Box Model

Satır içi, iç ve dış stil tanımlama yolları
Seçiciler, özgüllük ve kaskad mantığı
content, padding, border ve margin katmanları
box-sizing ile öngörülebilir boyutlandırma
display: block, inline ve inline-block
Normal akış ve öğelerin konumlanması

Modül 4

Renk, Tipografi ve Birimler

HEX, RGB ve HSL ile renk tanımı
font-family, font-size ve line-height
Web fontları ve font yükleme stratejisi
px, em, rem ve yüzde birimleri farkı
Metin hizalama, ağırlık ve harf aralığı
Okunabilirlik için tipografi ilkeleri

Günün hedefiKatılımcı Flexbox ve Grid ile esnek düzenler kurar, media query ile responsive tasarım yapar ve geçiş ile animasyonla arayüze akıcılık katar.

Modül 1

Flexbox ile Düzen

display: flex ve ana/çapraz eksen
justify-content ile yatay dağıtım
align-items ile dikey hizalama
flex-grow, flex-shrink ve flex-basis
flex-wrap ile satır kaydırma davranışı
gap ile öğeler arası boşluk yönetimi

Modül 2

CSS Grid ile Düzen

grid-template-columns ve rows tanımı
fr birimi ve repeat ile esnek şablon
grid-template-areas ile alan yerleşimi
grid-column ve grid-row ile yayılma
minmax ve auto-fit ile duyarlı ızgara
Grid ile Flexbox arasında seçim yapma

Modül 3

Responsive Tasarım ve Media Query

Mobil öncelikli (mobile-first) yaklaşım
min-width ve max-width ile kırılma noktaları
Esnek görseller ve max-width: 100%
clamp ile akışkan yazı ve boşluk
Viewport meta etiketi ve ölçekleme
Farklı cihaz ve ekranlarda düzen testi

Modül 4

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

transition ile yumuşak durum geçişi
transform: scale, rotate ve translate
keyframes ile çok adımlı animasyon
animation süresi, gecikme ve yineleme
hover ve focus ile etkileşimli stiller
prefers-reduced-motion ile erişilebilirlik

Günün hedefiKatılımcı JavaScript dil temellerini öğrenir, DOM'u günceller, olayları yönetir, fetch ile API verisi çeker ve etkileşimli bir uygulamayı tamamlar.

Modül 1

JavaScript Dil Temelleri

let ve const ile değişken tanımı
Veri tipleri ve otomatik tip dönüşümü
Koşullar, döngüler ve operatörler
Fonksiyon ve ok fonksiyonu söz dizimi
Diziler ve map, filter, forEach
Nesneler ve özelliklere erişim

Modül 2

DOM Seçme ve Manipülasyon

querySelector ile DOM öğesi seçme
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 değişiklik
Öğe kaldırma ve DOM ağacını güncelleme

Modül 3

Olay ve Etkileşim Yönetimi

addEventListener ile olay dinleme
Olay nesnesi ve hedef öğe bilgisi
click, input ve submit olayları
Olay yayılımı: bubbling ve capture
Olay delegasyonu ile verimli dinleme
preventDefault ile varsayılanı engelleme

Modül 4

Fetch, Asenkron ve Proje

fetch ile uzak API'den veri çekme
Promise ile then ve catch yapısı
async ve await ile okunur akış
JSON verisini DOM'a dinamik basma
localStorage ile tarayıcıda veri saklama
Bütünleşik etkileşimli uygulama projesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Semantik HTML

Anlamsal ve erişilebilir HTML etiketleriyle sağlam, SEO dostu ve geçerli belge yapıları kurabilirsiniz.

✅

Erişilebilir formlar

Doğru label, girdi türü ve doğrulama öznitelikleriyle kullanılabilir ve erişilebilir formlar tasarlarsınız.

✅

Modern CSS düzeni

Flexbox ve CSS Grid kullanarak esnek, bakımı kolay ve ekrana uyumlu sayfa düzenleri oluşturabilirsiniz.

✅

Responsive tasarım

Media query ve akışkan birimlerle mobilden masaüstüne tüm cihazlarda düzgün çalışan arayüzler yaparsınız.

✅

Animasyon ve geçiş

transition, transform ve keyframes ile akıcı, performanslı ve erişilebilir arayüz etkileşimleri eklersiniz.

✅

JavaScript ve DOM

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

✅

Asenkron veri

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

✅

Uçtan uca uygulama

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

Kimler İçin Uygundur?

Web geliştirmeye sağlam bir temel atmak isteyen geliştiriciler
statik sayfalarını etkileşimli hale getirmek isteyen 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?

Web geliştirmeye sağlam bir temel atmak isteyen geliştiriciler, statik sayfalarını etkileşimli hale getirmek isteyen tasarımcılar ve orta seviyeye geçmek isteyen öğrenciler için uygundur. İleri programlama deneyimi gerekmez; JavaScript dil temelleri baştan işlenir.

Bir çatı (framework) öğretiliyor mu?

Hayır. Eğitim React veya Vue gibi bir çatı değil, semantik HTML, modern CSS ve saf JavaScript öğretir. Bu temel, ileride herhangi bir çatıya geçerken öğrenmeyi çok kolaylaştıran kalıcı bir zemin kurar ve ön yüzün nasıl çalıştığını kavratır.

Eğitimin süresi ve formatı nedir?

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

Hangi konular işleniyor?

Semantik HTML ve formlar, CSS box model, Flexbox, Grid, responsive tasarım, geçiş ve animasyon, JavaScript dil temelleri, DOM manipülasyonu, olay yönetimi, fetch ile asenkron veri ve localStorage işlenir. Konular tek bir proje üzerinde birleştirilir.

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 web uygulaması 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

WEB DEVELOPMENT WITH HTML, CSS, AND JAVASCRIPT EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Semantik HTML ve Belge Yapısı

Formlar ve Erişilebilirlik

CSS Temelleri ve Box Model

Renk, Tipografi ve Birimler

Flexbox ile Düzen

CSS Grid ile Düzen

Responsive Tasarım ve Media Query

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

JavaScript Dil Temelleri

DOM Seçme ve Manipülasyon

Olay ve Etkileşim Yönetimi

Fetch, Asenkron ve Proje

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

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 Fundamentals: Web Development with HTML Eğitimi

Web Geliştiriciler için Bootstrap Eğitimi

Web Programming in Go: HTML Forms & ResponseWriter in Go Eğitimi