Temel Web Programlama HTML CSS JS Eğitimi

Eğitim Hakkında

HTML yapısından CSS tasarımına ve JavaScript etkileşimine kadar temelden akış

Temel Web Programlama Eğitimi, web'in üç temel dili olan HTML, CSS ve JavaScript ile sıfırdan etkileşimli sayfa geliştirmeyi öğretir. Katılımcılar HTML ile içerik ve semantik yapıyı, CSS ile kutu modeli, tipografi ve Flexbox düzenini öğrenir. JavaScript ile değişken, fonksiyon, DOM erişimi ve olaylar işlenir. Program üç dili birleştiren küçük bir uygulama projesiyle tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; HTML içeriğinden CSS tasarımına ve JavaScript etkileşimine kadar uygulamalı ilerlenir.

Seviye

Temel Seviye — HTML, CSS ve JavaScript ile sıfırdan etkileşimli web sayfası geliştirme

Öğrenme Metodu

Her konu küçük örneklerle yazılır; canlı önizleme ile değişiklikler görülür ve son gün tüm diller tek projede birleşir.

Neden Bu Eğitim?

🌐Web'in temeli

HTML, CSS ve JavaScript'i birlikte öğrenerek her modern web sayfasının dayandığı üç temel dilde sağlam bir zemin kurarsınız.

🛠️Uygulamalı

Her kavram küçük örneklerle hemen uygulanır; son gün gerçek bir mini proje ile öğrendiklerinizi birleştirirsiniz.

🚀Kariyer başlangıcı

Ön yüz geliştirme yolculuğuna sağlam bir temelle başlar, sonraki framework ve ileri konulara hazır hale gelirsiniz.

Anahtar Konular

web programlama eğitimihtml css javascript eğitimisıfırdan web geliştirmeön yüz geliştirme kursujavascript temelleri eğitimiweb tasarım eğitimitemel web geliştirmehtml css kursufrontend başlangıç eğitimi

“HTML, CSS ve JavaScript; web'in üç temel dilidir ve bu üçünü birlikte öğrenmek, modern geliştirmenin sağlam başlangıcıdı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 programlama bilgisi gerekmez.

2

İngilizce terim

Temel İngilizce terimlere aşinalık kod ve etiket adlarını anlamayı kolaylaştırır ancak zorunlu değildir.

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ı, yazılan sayfaları görüntülemek ve test etmek 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, form ve semantik etiketlerle anlamlı sayfa yapısı oluşturur.

Modül 1

Web ve HTML Temelleri

Web sayfasının tarayıcıda çalışma mantığı
HTML belge iskeleti ve doctype tanımı
head ve body bölümlerinin görevi
Etiket, öznitelik ve iç içe yapı
Editör ve tarayıcı ile ilk sayfanın kurulması
Canlı önizleme ve kaydetme akışı

Modül 2

Metin ve Bağlantılar

Başlık etiketleri ve metin hiyerarşisi
Paragraf, satır sonu ve metin biçimleme
a etiketi ile bağlantı oluşturma
Dahili ve harici bağlantı farkı
Sıralı ve sırasız liste yapıları
Özel karakterler ve HTML varlıkları

Modül 3

Görsel, Tablo ve Medya

img etiketi ile sayfaya görsel ekleme
alt metni ve görsel erişilebilirliği
table, tr ve td ile tablo kurma
Tablo başlığı ve hücre birleştirme
Ses ve video öğelerinin eklenmesi
Dosya yolu ve kaynak yönetimi ilkeleri

Modül 4

Form ve Semantik Yapı

form etiketi ve giriş alanları
input türleri ve label ilişkisi
Açılır liste ve onay kutusu alanları
Buton ve formun gönderilmesi işlemi
header, nav, main ve footer semantik yapısı
Anlamlı işaretlemenin önemi ve faydası

Günün hedefiKatılımcı CSS seçicilerini ve kutu modelini öğrenir, metin ve renk tasarımı yapar, Flexbox ile basit responsive düzenler kurar.

Modül 1

CSS Temelleri ve Seçiciler

Satır içi, iç ve harici CSS kullanımı
Eleman, sınıf ve kimlik seçiciler
Özgüllük ve miras mantığının kavranması
Renk, birim ve değer tanımları
Yorum ve kod düzeni düzenlemesi
Tarayıcı varsayılan stillerinin etkisi

Modül 2

Kutu Modeli ve Görünüm

İçerik, padding, border ve margin
box-sizing ve doğru boyut hesabı
display türleri block ve inline
Genişlik, yükseklik ve taşma kontrolü
Arka plan ve kenarlık stilleri
Gölge ve köşe yuvarlama efektleri

Modül 3

Metin ve Renk Tasarımı

Yazı tipi, boyut ve ağırlık ayarı
Satır yüksekliği ve metin hizalama
Renk ve arka plan uyumunun kurulması
Web fontları ve okunabilirlik dengesi
Bağlantı ve durum stillerinin tasarımı
Tipografik ritim ve boşluk yönetimi

Modül 4

Flexbox ile Düzen

display flex ile esnek konteyner
Ana eksen ve çapraz eksen kavramı
justify-content ile öğe dağıtımı
align-items ile çapraz eksende hizalama
gap ile öğeler arası boşluk ayarı
Basit responsive kart düzeni kurma

Günün hedefiKatılımcı JavaScript temellerini öğrenir, DOM ile sayfaya erişir, olaylarla etkileşim ekler ve üç dili birleştiren mini bir proje geliştirir.

Modül 1

JavaScript Temelleri

Değişken tanımı let, const ve var
Veri türleri ve temel operatörler
Koşullu ifadeler ve karşılaştırma
Döngüler ile tekrar eden işlemler
Fonksiyon tanımı ve fonksiyon çağrısı
Konsol ile temel hata ayıklama

Modül 2

DOM ile Sayfa Erişimi

DOM ağacı ve düğüm kavramının anlaşılması
querySelector ile sayfadan öğe seçme
textContent ve innerHTML ile içerik
Öznitelik ve stilin değiştirilmesi
classList ile sınıf ekleme ve kaldırma
Yeni öğe oluşturma ve sayfaya ekleme

Modül 3

Olaylar ve Etkileşim

addEventListener ile olay dinleme
click ve input olaylarını işleme
Olay nesnesi ve hedef öğenin kullanımı
Form gönderiminin varsayılan davranışını engelleme
Kullanıcı girişinin alınıp işlenmesi
Basit etkileşimli bileşen kurma

Modül 4

Küçük Uygulama Projesi

Sayfa yapısının HTML ile kurulması
CSS ile görünümün tasarlanması
JavaScript ile etkileşim eklenmesi
Yapılacaklar listesi uygulaması
Veri ekleme ve silme işlemleri
Projenin test edilmesi ve yayını

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

HTML yapısı

HTML belge iskeleti, metin, bağlantı, görsel ve tablo etiketleriyle anlamlı ve düzenli sayfa içeriği oluşturursunuz.

✅

Semantik ve form

header, nav ve footer gibi semantik etiketlerle yapı kurar, form alanlarıyla kullanıcı girişi toplarsınız.

✅

CSS seçiciler

Eleman, sınıf ve kimlik seçicileriyle stil uygular, özgüllük ve miras mantığını doğru yönetirsiniz.

✅

Kutu modeli

İçerik, padding, border ve margin ile kutu modelini kavrar, box-sizing ile boyutları doğru hesaplarsınız.

✅

Flexbox düzen

Flexbox ile öğeleri hizalar, dağıtır ve basit responsive kart düzenleri kurarak esnek sayfalar tasarlarsınız.

✅

JavaScript temeli

Değişken, veri türü, koşul, döngü ve fonksiyonlarla temel programlama mantığını JavaScript'te uygularsınız.

✅

DOM ve olaylar

DOM ile öğeleri seçer, içeriği değiştirir ve addEventListener ile kullanıcı etkileşimlerini işlersiniz.

✅

Mini proje

HTML, CSS ve JavaScript'i tek bir yapılacaklar uygulamasında birleştirerek çalışan bir web sayfası geliştirirsiniz.

Kimler İçin Uygundur?

Web geliştirmeye sıfırdan başlamak isteyenler
HTML
CSS
JavaScript temelini birlikte öğrenmek isteyen öğrenciler ve kariyerini ön yüz geliştirmeye döndürmek isteyen başlangıç seviyesi adaylar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web geliştirmeye sıfırdan başlamak isteyenler, HTML, CSS ve JavaScript temelini birlikte öğrenmek isteyen öğrenciler ve ön yüz geliştirmeye yönelmek isteyen adaylar için uygundur. Önceden programlama bilgisi gerekmez.

Önceden programlama bilmek gerekiyor mu?

Hayır. Eğitim başlangıç seviyesinden başlar; temel bilgisayar kullanımı yeterlidir. HTML ve CSS ile başlanır, JavaScript temelleri adım adım anlatılır. Her kavram küçük örneklerle pekiştirilir.

Hangi araçları kullanacağız?

Ücretsiz bir kod editörü olarak VS Code ve güncel bir web tarayıcısı kullanılır. Ek bir ücretli yazılım gerekmez. Tarayıcı geliştirici araçlarıyla sayfaları inceleme de öğretilir.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. HTML, CSS ve JavaScript sırasıyla işlenir ve son gün mini bir projede birleştirilir. 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 konuları ve geliştirilen mini projeyi 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

TEMEL WEB PROGRAMLAMA (HTML, CSS, JAVASCRIPT) EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Web ve HTML Temelleri

Metin ve Bağlantılar

Görsel, Tablo ve Medya

Form ve Semantik Yapı

CSS Temelleri ve Seçiciler

Kutu Modeli ve Görünüm

Metin ve Renk Tasarımı

Flexbox ile Düzen

JavaScript Temelleri

DOM ile Sayfa Erişimi

Olaylar ve Etkileşim

Küçük Uygulama Projesi

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

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

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

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

Introduction to HTML and CSS - Beginner Eğitimi

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

JavaScript Rules, Functions, & HTML Elements Eğitimi