FSD FRONT-END DEVELOPMENT: FEATURES OF HTML & CSS EĞİTİMİ

HTML ve CSS özelliklerine derinlemesine hakim olun

Semantik HTML, form ve medya, seçiciler, kutu modeli, renk ve tipografiyle sağlam ön yüz temeli

FSD Front-end Development: Features of HTML & CSS Eğitimi, HTML ve CSS'in sunduğu özellikleri sistematik ve derinlemesine ele alır. Program semantik belge yapısı, metin ve tablo öğeleri, form ve medya özellikleriyle başlar; CSS seçicileri, özgüllük ve cascade…

4 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Belge ve metin yapısından form ve medyaya, seçici ve kutu modelinden görsel biçimlendirmeye akış

FSD Front-end Development: Features of HTML & CSS Eğitimi, HTML ve CSS'in sunduğu özellikleri sistematik ve derinlemesine ele alır. Katılımcılar semantik belge yapısını, metin ve tablo öğelerini, form ve medya özelliklerini öğrenir. Program CSS seçicilerini, özgüllük ve cascade kurallarını, kutu modelini, renk ve arka plan özelliklerini, tipografi ve temel geçiş efektlerini gerçek sayfa örnekleriyle işler ve sağlam bir ön yüz temeli kurar.

Süre ve Format

4 Gün. Her gün dört modül; HTML ve CSS özellikleri gerçek sayfa örnekleri üzerinde uygulanır ve adım adım pekiştirilir.

Seviye

Orta Seviye — Semantik HTML, form ve medya, seçici ve kutu modeli, renk ve tipografiyle sağlam ön yüz temeli

Öğrenme Metodu

Her modülde öğrenilen HTML ve CSS özellikleri gerçek bir sayfa üzerinde uygulanır; sonuç tarayıcıda anında görülüp denetlenir.

Neden Bu Eğitim?

🏗️Sağlam temel

Semantik HTML ve cascade mantığını doğru kavrayarak sonraki her çerçeve ve aracı üzerine koyacağınız sağlam bir temel edinirsiniz.

🔍Özellik hakimiyeti

HTML öğelerini ve CSS özelliklerini ezber yerine sistematik kavrayarak doğru etiketi ve kuralı yerinde seçme yetkinliği kazanırsınız.

🎯Doğru seçim

Seçici özgüllüğü ve kutu modelini anlayarak beklenmedik stil çakışmalarını önler, öngörülebilir ve bakımı kolay CSS yazarsınız.

Anahtar Konular

html css eğitimihtml eğitimicss eğitimiön yüz geliştirme eğitimiweb tasarım eğitimicss seçiciler eğitimikutu modeli eğitimisemantik html eğitimifrontend eğitimiweb geliştirme kursu
“HTML ve CSS'in her özelliğini bilinçle kullanan bir geliştirici, en karmaşık arayüzü bile sağlam ve anlaşılır bir temel üzerine kurar.”

Ön Koşullar

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

1
Temel web bilgisi

Bir web sayfasının tarayıcıda nasıl açıldığına ve temel etiket mantığına aşinalık beklenir.

2
HTML'e giriş

Basit etiketlerle sayfa oluşturmuş olmak eğitimden verim için faydalıdır; konular bu temelin üzerine kurulur.

3
Geliştirici araçları

Tarayıcı geliştirici araçlarıyla Elements sekmesini açıp stil denetimi yapmak örneklerde kullanılır.

4
Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı gereklidir; canlı önizleme ile değişiklikler görülür.

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 ve meta etiketleri kavrar, semantik bölümleme öğelerini kullanır, metin düzeyi öğeleri ve listeleri uygular ve erişilebilir tablolar kurar.
Modül 1
Belge İskeleti ve Meta
  • doctype ve html lang nitelikleriyle belge tanımı
  • head içinde meta charset ve viewport
  • title ve açıklama meta etiketlerinin rolü
  • link ile stil ve favicon bağlama
  • script yerleşimi ve defer ile async farkı
  • Karakter kodlaması ve özel karakter varlıkları
Modül 2
Semantik Bölümleme
  • header, nav, main ve footer öğeleri
  • section ve article arasındaki anlam farkı
  • aside ile ikincil içeriğin işaretlenmesi
  • figure ve figcaption ile görsel açıklama
  • Başlık hiyerarşisi ve h1 ten h6 ya düzen
  • Semantik yapının erişilebilirliğe katkısı
Modül 3
Metin Düzeyi Öğeler
  • p, span, strong ve em anlamsal kullanımı
  • a etiketi, href ve hedef nitelikleri
  • Sıralı ve sırasız liste ile tanım listesi
  • blockquote, cite ve q ile alıntı
  • time, abbr ve mark gibi öğeler
  • code, pre ve kbd ile teknik içerik
Modül 4
Tablolar ve Hücre Yapısı
  • table, tr, th ve td ile tablo yapısı
  • thead, tbody ve tfoot ile bölümleme
  • caption ile tablo başlığı tanımı
  • colspan ve rowspan ile hücre birleştirme
  • scope niteliğiyle erişilebilir başlık bağı
  • Tablonun sadece veri için kullanımı ilkesi
Günün hedefiKatılımcı form öğelerini ve girdi türlerini, doğrulama niteliklerini, responsive görselleri, ses ve video gömmeyi ve iframe ile SVG gibi gömülü içeriği kullanmayı öğrenir.
Modül 1
Form Yapısı ve Öğeleri
  • form, label ve input temel yapısı
  • label ile girdiyi ilişkilendirme yöntemleri
  • fieldset ve legend ile alan gruplama
  • textarea, select ve option öğeleri
  • button türleri submit, reset ve button
  • name ve value ile form verisi oluşumu
Modül 2
Girdi Türleri ve Doğrulama
  • email, url, tel ve number girdi türleri
  • date, time ve color seçici girdileri
  • required, pattern ve placeholder nitelikleri
  • min, max, step ve maxlength kısıtları
  • datalist ile otomatik tamamlama önerisi
  • autocomplete ve input mod ipuçları
Modül 3
Görsel ve Medya Öğeleri
  • img, alt ve boyut niteliklerinin kullanımı
  • srcset ve sizes ile çözünürlük seçimi
  • picture ve source ile biçim ve sanat yönü
  • audio ve video ile medya gömme
  • track ile altyazı ve metin alternatifi
  • loading lazy ile gecikmeli görsel yükleme
Modül 4
Gömülü İçerik ve SVG
  • iframe ile dış içerik gömme ve güvenlik
  • sandbox ve loading nitelikleri
  • Satır içi SVG ile vektör grafik ekleme
  • SVG'nin CSS ile stillendirilmesi
  • canvas öğesine ve kullanım alanına giriş
  • Gömülü içerikte erişilebilirlik dikkati
Günün hedefiKatılımcı CSS seçici türlerini ve birleştiricileri, özgüllük ve cascade kurallarını, kutu modeli ve box-sizing'i, display ve positioning ile akış ve konumlandırmayı kavrar.
Modül 1
Seçiciler ve Birleştiriciler
  • Eleman, sınıf, id ve nitelik seçicileri
  • Alt öğe, çocuk ve kardeş birleştiriciler
  • Sözde sınıf hover, focus ve nth-child
  • Sözde öğe before ve after kullanımı
  • Nitelik seçicilerinde değer eşleşmesi
  • Gruplama ve seçici okunabilirliği
Modül 2
Özgüllük ve Cascade
  • Özgüllük hesabı ve seçicilerin ağırlığı
  • Cascade sırası ve kaynak önceliği
  • Kalıtım ve inherit, initial, unset değerleri
  • important kullanımı ve riskleri
  • Çakışmaların çözümü ve hata ayıklama
  • Sürdürülebilir seçici yazma ilkeleri
Modül 3
Kutu Modeli ve Katmanları
  • content, padding, border ve margin katmanı
  • box-sizing ile border-box davranışı
  • margin çökmesi ve etkilerinin yönetimi
  • width, height, min ve max kısıtları
  • overflow ile taşan içeriğin yönetimi
  • outline ve border arasındaki fark
Modül 4
Display ve Konumlandırma
  • block, inline ve inline-block davranışı
  • normal akış ve öğelerin yerleşimi
  • position static, relative ve absolute
  • fixed ve sticky ile sabit konumlandırma
  • z-index ve yığılma bağlamı yönetimi
  • float ve clear mantığına kısa bakış
Günün hedefiKatılımcı renk ve arka plan özelliklerini, gradyan ve gölgeleri, kenarlık ve köşe yuvarlamayı, web fontları ve tipografiyi, temel geçiş ve dönüşüm efektlerini uygular.
Modül 1
Renk ve Arka Plan
  • Renk yazımı hex, rgb, hsl ve isimler
  • Şeffaflık için alfa kanalı kullanımı
  • background-color ve background-image
  • background-size, position ve repeat
  • Birden çok arka plan katmanı tanımlama
  • currentColor ile renk kalıtımı kullanımı
Modül 2
Gradyan, Kenarlık ve Gölge
  • linear-gradient ile doğrusal geçiş
  • radial ve conic gradyan türleri
  • border stilleri, kalınlık ve renk
  • border-radius ile köşe yuvarlama
  • box-shadow ile kutu gölgesi oluşturma
  • text-shadow ile metin gölgesi ekleme
Modül 3
Tipografi ve Web Fontları
  • font-family ve yedek yazı tipi yığını
  • font-size, line-height ve ölçek
  • font-weight ve font-style ayarı
  • letter-spacing ve word-spacing
  • text-align, decoration ve transform
  • font-face ve Google Fonts ile web fontu
Modül 4
Geçiş ve Dönüşüme Giriş
  • transition ile özellik geçişi tanımı
  • transition-duration ve timing-function
  • hover ve focus durumlarında geçiş
  • transform ile scale, rotate ve translate
  • transform-origin ile dönüşüm noktası
  • Geçişlerde erişilebilirlik ve hareket azaltma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Semantik HTML

Belge iskeletini, semantik bölümleme öğelerini ve başlık hiyerarşisini doğru kullanarak anlamlı ve erişilebilir sayfa yapıları kurarsınız.

✅
Metin ve tablolar

Metin düzeyi öğeleri, listeleri ve erişilebilir tabloları anlamına uygun biçimde kullanarak içeriği yapılandırabilirsiniz.

✅
Form ve girdiler

Form öğelerini, girdi türlerini ve doğrulama niteliklerini uygulayarak kullanıcı dostu ve doğru veri toplayan formlar oluşturursunuz.

✅
Görsel ve medya

Responsive görselleri, ses ve video öğelerini ve SVG gibi gömülü içeriği erişilebilir biçimde sayfaya ekleyebilirsiniz.

✅
Seçici ve özgüllük

CSS seçicilerini ve birleştiricileri kullanır, özgüllük ve cascade kurallarını çözerek stil çakışmalarını öngörülebilir biçimde yönetirsiniz.

✅
Kutu modeli

Kutu modelini, box-sizing'i ve margin çökmesini kavrayarak öğelerin boyut ve boşluk davranışını tam olarak kontrol edersiniz.

✅
Konumlandırma

display, position ve z-index ile öğeleri akışta ve akış dışında doğru biçimde yerleştirir ve yığılma bağlamını yönetirsiniz.

✅
Renk ve tipografi

Renk, arka plan, gradyan, web fontları ve temel geçiş efektlerini uygulayarak görsel olarak tutarlı ve çekici sayfalar tasarlarsınız.

Kimler İçin Uygundur?

  • Temel HTML ve CSS'e aşina olup bilgisini sistematik biçimde derinleştirmek isteyen ön yüz geliştiriciler
  • tasarımı koda dökmek isteyen tasarımcılar
  • web temelini sağlamlaştırmak isteyen yazılımcılar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Temel HTML ve CSS'e aşina olup bilgisini sistematik biçimde derinleştirmek isteyen ön yüz geliştiriciler, tasarımı koda dökmek isteyen tasarımcılar ve web temelini sağlamlaştırmak isteyen yazılımcılar için uygundur. Sıfırdan başlayanlar için giriş eğitimi önerilir.
Bu eğitim sıfırdan başlayanlar için mi?
Tam sıfırdan çok, temel etiketlere aşina olup bilgisini derinleştirmek isteyenler için uygundur. HTML ve CSS özellikleri sistematik olarak, orta seviyede ele alınır. Hiç deneyimi olmayanlar için önce bir giriş düzeyi eğitim, sonra bu program daha verimli olur.
Bir çerçeve veya JavaScript öğretiliyor mu?
Hayır, bu eğitim tamamen HTML ve CSS özelliklerine odaklanır; JavaScript veya bir çerçeve kapsam dışıdır. Amaç, her çerçevenin üzerine kurulduğu sağlam ön yüz temelini, yani işaretleme ve stil yeteneğini eksiksiz kazandırmaktır.
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 ve CSS özellikleri gerçek sayfa örnekleri üzerinde uygulanır. Yüz yüze veya online yapılabilir; içerik kurumun ihtiyaçlarına ve ekibin mevcut seviyesine 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 örnek sayfaları 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 d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. FSD Front-end Development: Features of HTML & CSS Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSWeb Programming in Go: HTML Forms & ResponseWriter in Go Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

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

4 günOrtaOnline / Yüz Yüze / Hibrit

Go net/http ile Handler, ResponseWriter, html/template, HTML form işleme, dosya yükleme ve middleware kullanarak web uygulaması geliştirme eğitimi.

Detayları Gör →
HTML ve CSSWhole Page Controls & Extending Bootstrap Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Whole Page Controls & Extending Bootstrap Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Bootstrap ile tüm sayfa düzen kontrolleri, Sass değişkenleri, utility API, özel bileşen ve koyu mod ile çatıyı genişletme ve markaya uyarlama eğitimi.

Detayları Gör →
HTML ve CSSBootstrap Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Bootstrap Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

Bootstrap 5 grid, bileşen ve yardımcı sınıflarıyla duyarlı arayüz geliştirme eğitimi. Navbar, kart, form, modal ve Sass özelleştirme uygulamalı.

Detayları Gör →
HTML ve CSSCSS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Seçicilerden Flexbox, Grid, animasyon ve özel değişkenlere kadar modern CSS eğitimi. Duyarlı ve etkileşimli arayüz tasarımı uygulamalı.

Detayları Gör →
HTML ve CSSCSS Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

CSS seçicileri, kutu modeli, Flexbox ve medya sorgularıyla web biçimlendirme eğitimi. HTML bilenler için uygulamalı ve kurumsal CSS giriş programı.

Detayları Gör →
HTML ve CSSCSS ile Animasyon ve Geçişler Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS ile Animasyon ve Geçişler Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

CSS transition, transform, @keyframes ve performanslı animasyon eğitimi. Akıcı geçişler, 3B dönüşümler ve scroll animasyonlarıyla uygulamalı ve kurumsal.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn