WEB DEVELOPMENT FUNDAMENTALS - HTML AND CSS EĞİTİMİ

HTML ve CSS ile web temelini kurun

Semantik HTML, CSS kutu modeli, Flexbox, Grid ve responsive ile statik site geliştirme

Web Development Fundamentals - HTML and CSS Eğitimi, web geliştirmenin iki temel taşı HTML ve CSS'i sıfırdan öğretir. Program semantik HTML yapısı, metin, görsel, tablo ve form etiketleriyle başlar; CSS seçicileri, kutu modeli, tipografi ve konumlandırma işle…

3 gün Temel Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Semantik HTML'den CSS düzenine, responsive'den statik site yayınına kadar akış

Web Development Fundamentals - HTML and CSS Eğitimi, web geliştirmenin iki temel taşı olan HTML ve CSS'i sıfırdan öğretir. Katılımcılar semantik HTML yapısını, metin, görsel, tablo ve form etiketlerini öğrenir. CSS seçicileri, kutu modeli, tipografi, konumlandırma, Flexbox ve Grid düzeni işlenir. Program responsive tasarım temelleri ve statik bir sitenin yayınlanmasıyla tamamlanır; JavaScript kapsam dışıdır.

Süre ve Format

3 Gün. Her gün dört modül; semantik HTML'den CSS düzenine ve responsive statik site yayınına kadar uygulamalı ilerlenir.

Seviye

Temel Seviye — HTML ve CSS ile sıfırdan statik web sitesi geliştirme temelleri

Öğrenme Metodu

Her konu küçük örneklerle yazılır ve canlı önizlemeyle test edilir; son gün gerçek bir statik site kurulup yayınlanır.

Neden Bu Eğitim?

🧱Sağlam temel

HTML ve CSS'i derinlemesine öğrenerek tüm framework ve ileri konuların üzerine kurulduğu sağlam bir web temeli edinirsiniz.

📐Modern düzen

Flexbox ve CSS Grid ile modern yerleşim tekniklerini öğrenerek float zahmetine girmeden temiz ve esnek sayfa düzenleri kurarsınız.

🌐Yayına hazır

Responsive tasarım temelleri ve statik site yayınıyla kendi sitenizi kurup internette erişilebilir hale getirmeyi öğrenirsiniz.

Anahtar Konular

html css eğitimiweb geliştirme temellerihtml css kursustatik web sitesi kurmaresponsive web tasarım eğitimicss flexbox grid eğitimiön yüz geliştirme temellerisemantik html eğitimiweb tasarım başlangıç
“HTML ve CSS'te sağlam bir temel, sonraki tüm web teknolojilerini öğrenmeyi kolaylaştıran en değerli yatırımdır.”

Ön Koşullar

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

1
Bilgisayar kullanımı

Temel bilgisayar ve dosya yönetimi becerisi dışında önceden kodlama bilgisi gerekmez.

2
İnternet kavramı

Web sitesi, tarayıcı ve adres kavramlarına aşinalık konuları anlamayı kolaylaştırır.

3
Kod editörü

VS Code gibi ücretsiz bir kod editörünün kurulu olması örnekleri yazmak için gereklidir.

4
Tarayıcı

Güncel bir web tarayıcısı, sayfaları görüntülemek ve geliştirici araçlarını kullanmak 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ı HTML belge iskeletini kurar, metin, bağlantı, görsel ve tablo ekler, semantik etiketler ve formlarla anlamlı bir sayfa yapısı oluşturur.
Modül 1
Web ve Tarayıcı Temelleri
  • İnternet, sunucu ve tarayıcı ilişkisi
  • HTML, CSS ve içeriğin rolü ayrımı
  • HTML belge iskeleti ve doctype
  • head bölümü ve meta etiketlerin görevi
  • Karakter kodlaması ve dil tanımı
  • İlk web sayfasının oluşturulması
Modül 2
Metin ve Köprü Bağlantıları
  • Başlık ve paragraf etiketlerinin kullanımı
  • Metin vurgulama için strong ve em
  • Sıralı ve sırasız liste yapıları
  • a etiketi ile köprü bağlantısı
  • Göreli ve mutlak yol arasındaki fark
  • Sayfa içi çapa (anchor) bağlantıları
Modül 3
Görsel ve Tablo Öğeleri
  • img etiketi ile görsel ve alt metni
  • Görsel biçimleri ve çözünürlük
  • figure ve figcaption kullanımı
  • table ile satır ve sütun kurma
  • Başlık hücresi ve hücre birleştirme
  • Erişilebilir tablo yapısı kurma
Modül 4
Semantik HTML ve Formlar
  • header, nav, main, section ve footer
  • article ve aside semantik öğeleri
  • form etiketi ve giriş alanları
  • label ile alan etiket ilişkisi
  • input türleri ve doğrulama öznitelikleri
  • Anlamlı işaretlemenin faydaları
Günün hedefiKatılımcı CSS seçicilerini ve kutu modelini öğrenir, metin ve renk tasarımı yapar, display ve position ile sayfa akışını yönetir.
Modül 1
CSS'e Giriş ve Seçiciler
  • CSS'in sayfaya bağlanma yolları
  • Eleman, sınıf ve kimlik seçiciler
  • Birleşik ve alt öğe seçicileri
  • Özgüllük ve öncelik kurallarının mantığı
  • Miras ve varsayılan değerlerin etkisi
  • Renk ve birim türlerinin tanımı
Modül 2
Kutu Modeli ve Boyut
  • İçerik, dolgu, kenarlık ve dış boşluk
  • box-sizing ile doğru boyut hesabı
  • Genişlik, yükseklik ve taşma kontrolü
  • Kenarlık stili ve köşe yuvarlama
  • Arka plan rengi ve görselinin ayarı
  • Gölge ile görsel derinlik oluşturma
Modül 3
Metin ve Renk Tasarımı
  • Yazı tipi ailesi ve web fontları
  • Yazı boyutu, ağırlık ve stil ayarı
  • Satır yüksekliği ve harf aralığı
  • Metin hizalama ve metin süsleme stilleri
  • Renk paleti ve kontrast dengesi
  • Bağlantı durum stillerinin tasarımı
Modül 4
Konumlandırma ve Akış
  • display block, inline ve inline-block
  • position static, relative ve absolute
  • float ve temizleme (clear) davranışı
  • z-index ile katman sırası yönetimi
  • overflow ve içerik taşmasının yönetimi
  • Normal akış ve akıştan çıkarma
Günün hedefiKatılımcı Flexbox ve CSS Grid ile düzen kurar, responsive temellerini uygular ve gerçek bir statik siteyi hazırlayıp yayınlar.
Modül 1
Flexbox ile Düzen
  • flex konteyner ve eksen kavramı
  • justify-content ile öğe dağıtımı
  • align-items ile çapraz eksende hizalama
  • flex-wrap ile satır sarma davranışı
  • gap ile öğeler arası boşluk ayarı
  • Esnek kart ve menü düzeni kurma
Modül 2
CSS Grid ile Düzen
  • grid konteyner ve şablon tanımı
  • grid-template-columns ile sütun
  • fr birimi ve repeat fonksiyonu kullanımı
  • gap ile ızgara satır ve sütun boşluğu
  • Öğe yerleşimi ve hücre kapsama
  • Sayfa iskeletinin grid ile kurulması
Modül 3
Responsive Temelleri
  • viewport meta etiketi ve ölçek
  • Mobil öncelikli tasarım yaklaşımı
  • Göreli birimler: yüzde, em ve rem
  • media query ile kesme noktaları
  • Esnek görsel ve medya davranışı
  • Farklı ekranlarda görünüm testi
Modül 4
Statik Site Yayını
  • Dosya ve klasör düzeninin hazırlanması
  • Göreli dosya yollarının kontrolü
  • Tarayıcıda sitenin son görünüm testi
  • Erişilebilirlik ve kontrast denetimi
  • Statik barındırma seçeneklerinin incelenmesi
  • Sitenin yayınlanması ve paylaşımı

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Semantik HTML

header, nav, main ve footer gibi semantik etiketlerle anlamlı, erişilebilir ve düzenli sayfa yapıları oluşturursunuz.

✅
Medya ve tablo

Görsel, figure, tablo ve form etiketleriyle zengin içerik kurar, alt metni ve erişilebilir tablo yapısını uygularsınız.

✅
CSS seçiciler

Eleman, sınıf, kimlik ve birleşik seçicilerle stil uygular, özgüllük ve miras kurallarını doğru yönetirsiniz.

✅
Kutu modeli

İçerik, dolgu, kenarlık ve dış boşluk ile kutu modelini kavrar, box-sizing ile boyutları doğru hesaplarsınız.

✅
Konumlandırma

display, position, float ve overflow ile sayfa akışını ve öğelerin konumunu bilinçli biçimde yönetirsiniz.

✅
Flexbox ve Grid

Flexbox ile esnek, CSS Grid ile iki boyutlu düzenler kurarak modern ve temiz sayfa yerleşimleri tasarlarsınız.

✅
Responsive

viewport, göreli birimler ve media query ile mobil öncelikli, farklı ekranlara uyum sağlayan responsive sayfalar kurarsınız.

✅
Statik yayın

Dosya düzenini hazırlar, göreli yolları kontrol eder ve statik barındırmayla kendi sitenizi yayınlarsınız.

Kimler İçin Uygundur?

  • Web geliştirmeye HTML ve CSS temelinden başlamak isteyenler
  • statik web sitesi kurmayı öğrenmek isteyen öğrenciler
  • tasarımları koda dökmek isteyen başlangıç seviyesi aday geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Web geliştirmeye HTML ve CSS temelinden başlamak isteyenler, statik site kurmayı öğrenmek isteyen öğrenciler ve tasarımları koda dökmek isteyen başlangıç seviyesi adaylar için uygundur. Önceden kodlama bilgisi gerekmez.
Bu eğitimde JavaScript öğreniliyor mu?
Hayır, bu eğitim yalnızca HTML ve CSS'e odaklanır ve bu iki dili derinlemesine ele alır. JavaScript ile etkileşim eklemek isteyenler için HTML, CSS ve JavaScript'i birlikte işleyen ayrı bir temel web programlama eğitimi daha uygundur.
Flexbox ve Grid arasındaki fark nedir?
Flexbox tek eksenli, yani bir satır veya sütun boyunca esnek düzen için uygundur; CSS Grid ise satır ve sütunu aynı anda yöneten iki boyutlu düzen kurar. Eğitimde her ikisi örneklerle gösterilir ve ne zaman hangisinin kullanılacağı açıklanır.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Semantik HTML'den CSS düzenine ve responsive statik site yayınına kadar ilerlenir. Yüz yüze veya online yapılabilir; içerik katılımcı düzeyine 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 işlenen HTML ve CSS konularını ve geliştirilen örnek statik siteyi 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. Web Development Fundamentals - HTML and CSS Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

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

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSHTML with JavaScript & CSS: Introduction Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML with JavaScript & CSS: Introduction Eğitimi

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

Semantik HTML, CSS ile görünüm ve JavaScript ile etkileşimi birlikte öğreten, mini projeyle biten orta seviye web geliştirme giriş eğitimi.

Detayları Gör →
HTML ve CSSHTML with JavaScript & CSS: Styling HTML & JavaScript Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML with JavaScript & CSS: Styling HTML & JavaScript Eğitimi

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

CSS seçiciler, görsel efektler, CSS değişkenleri ve JavaScript ile dinamik stil, koyu tema ve animasyonları öğreten orta seviye biçimlendirme eğitimi.

Detayları Gör →
HTML ve CSSHTML with JavaScript & CSS: WebSockets & Asynchronous Processing Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML with JavaScript & CSS: WebSockets & Asynchronous Processing Eğitimi

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

Event loop, Promise, async/await, WebSocket ve Server-Sent Events ile asenkron işlem ve gerçek zamanlı iletişim kurmayı öğreten orta seviye eğitim.

Detayları Gör →
HTML ve CSSImproving Responsiveness, Sharing Collections, and Parallelizing Algorithms Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Improving Responsiveness, Sharing Collections, and Parallelizing Algorithms Eğitimi

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

Web Workers, SharedArrayBuffer ve Atomics ile yanıt veren arayüzler kurmayı ve algoritmaları paralelleştirmeyi öğreten orta seviye performans eğitimi.

Detayları Gör →
HTML ve CSSIntroduction to HTML and CSS - Beginner Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Introduction to HTML and CSS - Beginner Eğitimi

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

Sıfırdan HTML ve CSS öğrenin: etiketler, semantik yapı, formlar, seçiciler, kutu modeli ve ilk web sayfanızı kodlayın. Başlangıç seviyesi uygulamalı eğitim.

Detayları Gör →
HTML ve CSSIntroduction to HTML, CSS and JavaScript (TT4003) Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Introduction to HTML, CSS and JavaScript (TT4003) Eğitimi

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

HTML, CSS ve JavaScript'i birlikte öğrenin: semantik yapı, Flexbox, DOM, olaylar ve form doğrulama ile dinamik web uygulaması geliştirin. Uygulamalı eğitim.

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