Front–End Development (Web Arayüz Geliştirme) Eğitimi

Eğitim Hakkında

Web arayüz geliştirme temelleri

Eğitim, web arayüz geliştirmenin tüm temel katmanlarını kapsar: semantik HTML5 ve form elemanları, CSS3 ile kutu modeli, Flexbox ve Grid yerleşimleri, media query ile duyarlı tasarım, CSS değişkenleri, ES6 JavaScript, DOM manipülasyonu ve olay yönetimi, Fetch API ile JSON verisi, erişilebilirlik (WCAG, ARIA), tarayıcı geliştirici araçları ve Git ile yayınlama.

Süre ve Format

2 Gün. Her gün dört modül; HTML ve CSS; JavaScript ve Yayın ekseninde ilerleyen uygulamalı program.

Seviye

Temel Seviye — HTML5, CSS3, Flexbox/Grid, JavaScript, DOM, Fetch ve erişilebilir duyarlı arayüz

Öğrenme Metodu

Katılımcılar iki günde duyarlı bir portfolyo sitesi ve API'den veri çeken küçük bir uygulama geliştirir.

Neden Bu Eğitim?

🎨Duyarlı tasarım

Her ekran boyutunda düzgün görünen arayüzler yaparsınız.

⚙️Etkileşimli sayfa

JavaScript ile DOM ve olayları yöneten dinamik sayfalar kurarsınız.

♿Erişilebilirlik

WCAG ve ARIA ile herkesin kullanabildiği arayüz üretirsiniz.

Anahtar Konular

front-end developmentweb arayüz geliştirmehtml css javascriptflexbox gridresponsive tasarımdom fetch apierişilebilirlik wcaggithub pagesfrontend eğitimi

“Kullanıcının gördüğü her şey, sizin yazdığınız arayüzdür.”

Ön Koşullar

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

1

Bilgisayar kullanımı

Dosya ve klasör işlemleri ile tarayıcı kullanımı.

2

Metin editörü

VS Code kurulumu.

3

Tarayıcı

Güncel Chrome veya Firefox.

4

Merak

Önceden kodlama deneyimi gerekmez.

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 içerik kurar, CSS ile duyarlı yerleşim oluşturur.

Modül 1

Semantik HTML

Doküman yapısı ve meta etiketleri
header, nav, main, article, footer
Başlık hiyerarşisi
Bağlantı, görsel ve picture/srcset
Form elemanları ve doğrulama özellikleri
Tablo ve liste kullanımı

Modül 2

CSS Temelleri

Seçiciler ve özgüllük (specificity)
Kutu modeli ve box-sizing
Tipografi ve web fontları
Renk, gradyan ve gölge
Pseudo-class ve pseudo-element
CSS değişkenleri (custom properties)

Modül 3

Yerleşim Sistemleri

Flexbox ana/çapraz eksen
Flex-wrap, gap ve hizalama
CSS Grid şablon alanları
Grid auto-fit ve minmax
Position, z-index ve sticky
Container ve düzen kalıpları

Modül 4

Duyarlı Tasarım

Mobile-first yaklaşım
Media query kırılım noktaları
Göreli birimler (rem, vw, clamp)
Duyarlı görseller
Koyu mod: prefers-color-scheme
Chrome DevTools cihaz emülasyonu

Günün hedefiKatılımcı JavaScript ile sayfayı dinamikleştirir, API verisi çeker ve siteyi yayına alır.

Modül 1

JavaScript Temelleri

let, const ve veri tipleri
Fonksiyon ve arrow function
Dizi metotları: map, filter, reduce
Nesne ve destructuring
Template literal
Modüller (import/export)

Modül 2

DOM ve Olaylar

querySelector ve DOM ağacı
Eleman oluşturma ve güncelleme
addEventListener ve event delegation
Form verisi okuma ve doğrulama
classList ile stil değiştirme
localStorage kullanımı

Modül 3

Asenkron JavaScript ve API

Promise ve async/await
Fetch API ve HTTP metotları
JSON ayrıştırma
Hata yönetimi ve yükleniyor durumu
CORS kavramı
Genel bir REST API ile liste uygulaması

Modül 4

Erişilebilirlik ve Yayın

WCAG 2.2 ilkeleri
ARIA rolleri ve etiketleri
Klavye gezinmesi ve odak
Renk kontrastı
Lighthouse ile performans ve erişilebilirlik ölçümü
Git ve GitHub Pages ile yayınlama

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Semantik HTML

Anlamlı ve erişilebilir HTML yapısı kurabilirsiniz.

✅

CSS ustalığı

Özgüllük ve kutu modelini bilerek stil yazabilirsiniz.

✅

Flex ve Grid

Karmaşık yerleşimleri Flexbox ve Grid ile kurabilirsiniz.

✅

Duyarlı sayfa

Mobile-first ve media query ile duyarlı tasarım yapabilirsiniz.

✅

ES6 kodlama

Modern JavaScript sözdizimiyle okunur kod yazabilirsiniz.

✅

DOM yönetimi

Olay dinleyici ve DOM güncellemeleriyle etkileşimli sayfa üretebilirsiniz.

✅

API tüketimi

Fetch ve async/await ile JSON verisini sayfaya aktarabilirsiniz.

✅

Yayına alma

Lighthouse ile ölçüp siteyi GitHub Pages'te yayınlayabilirsiniz.

Kimler İçin Uygundur?

Web geliştirmeye başlamak isteyen öğrenciler
kariyer değiştirenler
grafik tasarımcılar
arayüz becerilerini tazelemek isteyenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web geliştirmeye başlamak isteyen öğrenciler, kariyer değiştirenler, grafik tasarımcılar ve arayüz becerilerini tazelemek isteyenler için uygundur.

Hiç kodlama bilmeden katılabilir miyim?

Evet, eğitim sıfırdan başlar; ilk modül HTML yapısıdır.

React veya Angular öğretilir mi?

Hayır; framework öncesi sağlam temel kurulur, sonraki adım olarak yönlendirme yapılır.

Portfolyo projesi yayınlanır mı?

Evet, son modülde site GitHub Pages ile yayına alınır.

Eğitim sonunda sertifika verilir mi?

Katılımcılara Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

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

FRONT–END DEVELOPMENT (WEB ARAYÜZ GELİŞTİRME) EĞİTİMİ