GETTING STARTED WITH HTML AND CSS EĞİTİMİ

Sıfırdan ilk web sayfanızı kurun ve stilleyin

HTML ile yapı, CSS ile stil, Flexbox ile yerleşim ve gerçek bir sayfa projesiyle web'e giriş

Getting Started with HTML and CSS Eğitimi, web geliştirmeye sıfırdan sağlam bir başlangıç yapmayı öğretir. Program web'in nasıl çalıştığı, HTML belge yapısı ve etiketlerle başlar; CSS ile renk, tipografi ve kutu modeli, ardından Flexbox ve temel Grid ile yerl…

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

Eğitim Hakkında

Web'in çalışması ve ilk sayfadan stillemeye, yerleşime ve gerçek bir projeye akış

Getting Started with HTML and CSS Eğitimi, web geliştirmeye sıfırdan sağlam bir başlangıç yapmayı öğretir. Katılımcılar web'in nasıl çalıştığını, HTML ile sayfa yapısını, etiketleri ve bağlantıları öğrenir. Program CSS ile renk, tipografi ve kutu modeli, Flexbox ve temel Grid ile yerleşim, basit responsive yaklaşımı kapsar ve tüm bu bilgiyi çok bölümlü gerçek bir açılış sayfası projesinde birleştirir.

Süre ve Format

4 Gün. Her gün dört modül; bilgiler adım adım gerçek bir açılış sayfasına dönüşerek çalışan bir projede birleşir.

Seviye

Orta Seviye — İlk sayfadan stillemeye, yerleşimden gerçek bir projeye HTML ve CSS temellerini kurma

Öğrenme Metodu

Her modülde öğrenilen yapı ve stil doğrudan gerçek bir sayfaya uygulanır; sonuç tarayıcıda anında görülerek pekiştirilir.

Neden Bu Eğitim?

🚀Sağlam başlangıç

Web geliştirmenin iki temel dili olan HTML ve CSS'i sıfırdan, doğru alışkanlıklarla öğrenerek kariyerinize sağlam bir giriş yaparsınız.

🛠️Yaparak öğrenme

Her konuyu teoride bırakmadan gerçek bir sayfaya uygulayarak öğrenir, eğitim sonunda yayına hazır somut bir proje ortaya koyarsınız.

🌱İleriye hazırlık

Temel yapı ve stil mantığını iyi kavrayarak JavaScript ve çerçeveler gibi sonraki adımlara güvenle geçebileceğiniz bir zemin kurarsınız.

Anahtar Konular

html css eğitimisıfırdan web tasarım eğitimihtml eğitimicss eğitimiweb geliştirme kursuön yüz geliştirme eğitimiweb tasarım kursuflexbox eğitimiweb geliştirmeye girişkodlamaya başlangıç
“Her büyük web geliştiricisi ilk sayfasını bir etiketle kurdu; bu eğitim o ilk adımı sağlam ve doğru alışkanlıklarla atmanızı sağlar.”

Ön Koşullar

Eğitime başlamak için yeterli olan basit gereksinimler

1
Bilgisayar kullanımı

Dosya ve klasör yönetimi gibi temel bilgisayar kullanımı yeterlidir; önceden kodlama deneyimi gerekmez.

2
İnternet erişimi

Örnekleri denemek ve kaynaklara ulaşmak için güncel bir tarayıcı ve internet bağlantısı gereklidir.

3
Öğrenme isteği

Adım adım ilerlemeye ve bol uygulama yapmaya açık olmak eğitimden en iyi verimi almanızı sağlar.

4
Editör kurulumu

VS Code gibi ücretsiz bir kod editörü kurmak yeterlidir; kurulum eğitimin ilk gününde birlikte yapı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ı web'in nasıl çalıştığını kavrar, HTML belge yapısını kurar, metin, bağlantı ve görsel etiketlerini kullanır ve ilk çalışan sayfasını oluşturur.
Modül 1
Web Nasıl Çalışır
  • İstemci, sunucu ve tarayıcı ilişkisi
  • URL, alan adı ve HTTP isteğinin mantığı
  • HTML, CSS ve JavaScript rollerinin ayrımı
  • Bir sayfanın tarayıcıda işlenme süreci
  • Editör kurulumu ve ilk dosya oluşturma
  • Canlı sunucu ile değişiklikleri görme
Modül 2
HTML Belge Yapısı
  • doctype, html, head ve body yapısı
  • Etiket, nitelik ve değer kavramları
  • head içinde title ve meta etiketleri
  • Yorum satırı ve kod girintileme
  • Açılış ve kapanış etiketi mantığı
  • İç içe öğelerin doğru yerleşimi
Modül 3
Metin ve İçerik Etiketleri
  • Başlık etiketleri h1 den h6 ya
  • Paragraf ve satır sonu etiketleri
  • strong ve em ile anlamsal vurgu
  • Sıralı ve sırasız liste oluşturma
  • Özel karakter ve varlık kullanımı
  • Anlamlı içerik yapılandırma yaklaşımı
Modül 4
Bağlantılar ve Görseller
  • a etiketiyle sayfa içi ve dışı bağlantı
  • Mutlak ve göreli bağlantı yolu
  • target niteliğiyle yeni sekmede açma
  • img etiketi ve src ile görsel ekleme
  • alt metninin önemi ve doğru yazımı
  • Sayfa içi bağlantı için id çapası
Günün hedefiKatılımcı CSS'i sayfaya bağlar, seçicilerle öğeleri hedefler, renk ve tipografiyi ayarlar ve kutu modeliyle boşluk ve boyut davranışını kavrar.
Modül 1
CSS'e Giriş ve Bağlama
  • Satır içi, dahili ve harici CSS farkı
  • link ile harici stil dosyası bağlama
  • CSS kural yapısı seçici ve bildirim
  • Yorum ekleme ve kodu düzenleme
  • Tarayıcı varsayılan stillerinin etkisi
  • Geliştirici araçlarıyla stili inceleme
Modül 2
Seçiciler ve Renk
  • Eleman, sınıf ve id seçicileri
  • class niteliğiyle öğe gruplama
  • Renk yazımı isim, hex ve rgb biçimi
  • color ve background-color kullanımı
  • Basit özgüllük ve öncelik mantığı
  • Renk paleti seçimi ve tutarlılık
Modül 3
Tipografi ve Birimler
  • font-family ve yedek yazı tipi
  • font-size ve line-height ayarı
  • font-weight ve text-align ayarı
  • px, em ve rem birimleri arasındaki fark
  • Web fontu ekleme ve kullanım yaklaşımı
  • Okunabilir metin düzeni ilkeleri
Modül 4
Kutu Modeli ve Boşluk
  • content, padding, border ve margin
  • box-sizing border-box kullanımı
  • margin ve padding ile boşluk ayarı
  • border ile kenarlık tanımı ve stili
  • width ve height ile boyut tanımı
  • display block ve inline davranış farkı
Günün hedefiKatılımcı Flexbox ile esnek düzenler kurar, temel Grid ile ızgara oluşturur, öğeleri konumlandırır ve basit media query ile responsive yaklaşıma giriş yapar.
Modül 1
Flexbox ile Esnek Düzen
  • display flex ile konteyner kurma
  • flex-direction ile yön belirleme
  • justify-content ile yatay dağıtım
  • align-items ile dikey hizalama
  • gap ile öğeler arası boşluk yönetimi
  • flex-wrap ile satır sarma davranışı
Modül 2
Temel CSS Grid Düzeni
  • display grid ile ızgara düzeni kurma
  • grid-template-columns ile sütunlar
  • fr birimi ile esnek pay dağıtımı
  • gap ile ızgara boşluğunun ayarı
  • repeat fonksiyonuyla sütun tekrarı
  • Basit bir kart ızgarası oluşturma
Modül 3
Konumlandırma Temelleri
  • position relative ve absolute kullanımı
  • fixed ile ekranda sabit öğe konumu
  • sticky ile yapışkan başlık davranışı
  • z-index ile katman sırası yönetimi
  • Örtüşen öğelerin konum yönetimi
  • Konumlandırmanın yerinde kullanımı
Modül 4
Responsive'e Giriş
  • viewport meta etiketi kullanımı
  • Mobil öncelikli tasarım düşüncesi
  • Basit media query ile kesme noktası
  • Esnek görsel ve max-width kullanımı
  • Küçük ekranda menünün uyarlanması
  • Farklı ekran boyutlarında test etme
Günün hedefiKatılımcı çok bölümlü bir açılış sayfası kurar, gezinme, hero ve kart bileşenlerini oluşturur, basit bir form ekler ve sayfayı internette yayınlar.
Modül 1
Sayfa İskeleti ve Gezinme
  • Semantik bölümlerle sayfa iskeleti
  • Üst gezinme çubuğunun kurulumu
  • Logo ve menü bağlantılarının düzeni
  • Sayfa içi bağlantıyla bölüm geçişi
  • Mobilde menünün açılış davranışı
  • Tutarlı boşluk ve hizalama düzeni
Modül 2
Hero ve Kart Bileşenleri
  • Dikkat çeken hero bölümü tasarımı
  • Başlık, açıklama ve çağrı butonu
  • Kart ızgarasıyla özellik bölümü
  • Görsel ve metin yerleşim düzeni
  • Buton üzerinde hover geçiş efekti
  • Bileşenlerde tutarlı stil kullanımı
Modül 3
Form ve Alt Bilgi
  • İletişim formu alanlarının kurulumu
  • label ve input öğelerini ilişkilendirme
  • placeholder ve required kullanımı
  • Form alanı düzeni ve boşluk ayarı
  • Alt bilgi ve sosyal bağlantılar
  • Erişilebilir form kurma yaklaşımı
Modül 4
Son Rötuş ve Yayınlama
  • Tutarlılık ve boşlukların denetimi
  • Farklı ekranda görünüm kontrolü
  • Geliştirici araçlarıyla hata ayıklama
  • Dosya düzeni ve temiz kod yazımı
  • GitHub Pages veya Netlify ile yayın
  • Yayınlanan sayfanın paylaşılması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Web temelleri

İstemci, sunucu ve tarayıcı ilişkisini ve HTML, CSS, JavaScript rollerini kavrayarak web'in nasıl çalıştığını anlarsınız.

✅
HTML yapısı

Belge iskeletini, metin, bağlantı ve görsel etiketlerini doğru kullanarak anlamlı ve çalışan HTML sayfaları oluşturursunuz.

✅
CSS stilleme

CSS'i sayfaya bağlar, seçicilerle öğeleri hedefler ve renk ile tipografiyi ayarlayarak sayfalarınıza görsel kimlik kazandırırsınız.

✅
Kutu modeli

content, padding, border ve margin katmanlarını ve box-sizing'i kavrayarak öğelerin boyut ve boşluk davranışını kontrol edersiniz.

✅
Flexbox yerleşim

Flexbox ile esnek düzenler kurar, öğeleri hizalar ve dağıtır; gezinme ve kart gibi gerçek bileşenleri rahatlıkla düzenlersiniz.

✅
Grid ve konum

Temel CSS Grid ile ızgaralar kurar, position ve z-index ile öğeleri konumlandırarak düzeni tam olarak yönetirsiniz.

✅
Responsive giriş

viewport ve basit media query ile sayfanızı farklı ekran boyutlarına uyarlayarak mobil dostu bir düzenin temelini atarsınız.

✅
Gerçek proje

Öğrendiklerinizi çok bölümlü bir açılış sayfasında birleştirir ve projeyi internette yayınlayarak somut bir eser ortaya koyarsınız.

Kimler İçin Uygundur?

  • Web geliştirmeye yeni başlayan ve sağlam bir temel kurmak isteyen kişiler
  • kariyer değişikliği yapanlar
  • kodla sayfa üretmek isteyen tasarımcılar
  • içerik üreticileri için uygundur. Önceden kodlama deneyimi gerekmez

Sıkça Sorulan Sorular

Bu eğitim için önceden deneyim gerekiyor mu?
Hayır, önceden kodlama deneyimi gerekmez. Temel bilgisayar kullanımı yeterlidir. Eğitim web'in nasıl çalıştığından başlayarak HTML ve CSS'i sıfırdan, doğru alışkanlıklarla öğretir ve her konuyu gerçek bir sayfa üzerinde uygulatarak pekiştirir.
Eğitim sonunda ne üretebileceğim?
Eğitim sonunda gezinme çubuğu, hero bölümü, kart ızgarası, iletişim formu ve alt bilgi içeren çok bölümlü, mobil uyumlu bir açılış sayfası kurabilir ve bunu GitHub Pages ya da Netlify gibi bir ortamda internette yayınlayabilirsiniz.
JavaScript veya bir çerçeve öğretiliyor mu?
Bu eğitim yapı için HTML ve stil için CSS'e odaklanır; JavaScript ve çerçeveler kapsam dışıdır. Amaç, sonraki adımlar için sağlam bir temel kurmaktır. Bu temeli edindikten sonra JavaScript ve React gibi konulara çok daha rahat geçebilirsiniz.
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. Bilgiler adım adım gerçek bir açılış sayfası projesine dönüşür. Yüz yüze veya online yapılabilir; içerik kurumun ihtiyaçlarına ve katılımcı grubunun hızına 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 açılış sayfası 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 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. Getting Started with HTML and 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 CSSCSS İleri Seviye Teknikleri Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS İleri Seviye Teknikleri Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

CSS Grid, custom properties, container queries, :has ve ölçeklenebilir CSS mimarisi eğitimi. İleri seçiciler ve performansla uygulamalı ve kurumsal.

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

HTML Eğitimi

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

HTML5 belge yapısı, semantik etiketler, formlar, medya, ARIA erişilebilirlik ve SEO eğitimi. Sıfırdan ileriye uygulamalı ve kurumsal HTML programı.

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

HTML Grafik ve Animasyon Teknikleri Eğitimi

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

Canvas 2D, SVG ve Web Animations API ile tarayıcıda grafik çizimi ve animasyon eğitimi. Kütüphanesiz ve performans odaklı uygulamalı kurumsal program.

Detayları Gör →
HTML ve CSSHTML ile İnteraktif Web Sayfaları Tasarımı Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML ile İnteraktif Web Sayfaları Tasarımı Eğitimi

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

HTML, JavaScript ve DOM ile etkileşimli web sayfası eğitimi. Olaylar, form doğrulama, fetch ve erişilebilir bileşenlerle uygulamalı ve kurumsal program.

Detayları Gör →
HTML ve CSSHTML ve API Kullanımı ile Gelişmiş Uygulamalar Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML ve API Kullanımı ile Gelişmiş Uygulamalar Eğitimi

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

Fetch, Web Storage, IndexedDB, Canvas, WebSocket ve Service Worker ile HTML tabanlı dinamik ve çevrimdışı web uygulamaları geliştirme eğitimi.

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

HTML ve CSS3'e Giriş Eğitimi

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

HTML5 etiketleri ve CSS3 ile sıfırdan web sayfası kurmayı öğreten başlangıç eğitimi. Ön bilgi gerekmez, uygulamalı ve kurumsal.

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