Ön Yüz Başlangıç: HTML CSS JS Eğitimi

Eğitim Hakkında

Semantik HTML'den modern CSS düzene, JavaScript dilinden DOM ve asenkron koda temel

FSD Programming Languages: FSD Front-end Primer Eğitimi, ön yüz geliştirmenin üç temel dilini sağlam bir zemin kurarak öğretir. Katılımcılar semantik HTML ile belge yapısını, modern CSS ile Flexbox ve Grid düzeni, JavaScript diliyle değişken, fonksiyon ve veri yapılarını uygular. DOM manipülasyonu, olaylar, asenkron kod ve fetch ile veri çekme işlenir. Program duyarlı, erişilebilir ve etkileşimli küçük bir web projesiyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; küçük bir web sayfası dört gün boyunca yapı, stil, etkileşim ve veri aşamalarıyla adım adım işler hale getirilir.

Seviye

Orta Seviye — HTML, CSS ve JavaScript ile ön yüzün üç temel dilinde sağlam zemin

Öğrenme Metodu

Küçük bir web projesi dört gün boyunca canlı kodlanır; her modülde bir dil kavramı sayfada uygulanarak tarayıcıda sonucu görülür.

Neden Bu Eğitim?

🧱Sağlam temel

Kütüphanelere geçmeden önce HTML, CSS ve JavaScript'i öğrenerek sonraki her teknolojiyi üzerine kuracağınız bir zemin edinirsiniz.

📱Duyarlı tasarım

Flexbox, Grid ve medya sorgularıyla her ekran boyutuna uyum sağlayan, modern ve duyarlı arayüzler kurmayı öğrenirsiniz.

🔌Etkileşim gücü

DOM, olaylar ve asenkron kod ile statik sayfayı canlandırır, kullanıcı etkileşimine yanıt veren dinamik arayüzler geliştirirsiniz.

Anahtar Konular

html css javascript eğitimiön yüz geliştirme eğitimiweb geliştirme başlangıç kursufrontend primer eğitimicss flexbox grid eğitimijavascript temel eğitimidom eğitimiduyarlı tasarım eğitimiweb programlama eğitimisıfırdan web geliştirme

“Her çerçeve bir gün eskir ama web'in üç temel dili kalır; sağlam kurulan bu temel, sonraki her teknolojinin taşıyıcısıdır.”

Ön Koşullar

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

1

Bilgisayar kullanımı

Dosya yönetimi, klasör yapısı ve temel tarayıcı kullanımı gibi günlük beceriler eğitime başlamak için yeterlidir.

2

Mantıksal düşünme

Adım adım problem çözme ve mantıksal akıl yürütme alışkanlığı, programlama kavramlarını öğrenmeyi kolaylaştırır.

3

İngilizce aşinalık

Teknik terim ve anahtar kelimelerin İngilizce olması nedeniyle temel düzeyde İngilizceye aşinalık faydalı olur.

4

Geliştirme ortamı

Bir kod editörü (VS Code önerilir) ve modern tarayıcı kurulu; internet bağlantısı olan bir bilgisayar yeterlidir.

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 istemci-sunucu modelini kavrar, semantik HTML ile belge yapısı kurar, metin, bağlantı, görsel ve formları doğru etiketlerle oluşturur.

Modül 1

Web Nasıl Çalışır

İstemci, sunucu ve HTTP istek-yanıt modeli
Tarayıcının HTML, CSS ve JS'yi işleme süreci
URL yapısı, alan adı ve DNS mantığı
Geliştirici araçlarının (DevTools) tanıtımı
Belge nesne modeli (DOM) kavramına giriş
Dosya yapısı ve proje organizasyonu

Modül 2

HTML Belge Yapısı

DOCTYPE, head ve body belge iskeleti
Meta etiketler ve karakter kodlaması
Başlık hiyerarşisi ve paragraf yapısı
Liste, tablo ve alıntı etiketleri
Bağlantı, görsel ve medya ekleme
Blok ve satır içi öğe ayrımının kavranması

Modül 3

Semantik HTML Etiketleri

header, nav, main ve footer bölümleri
article ve section ile içerik anlamı
Semantiğin erişilebilirliğe katkısı
Semantiğin SEO ve okunabilirliğe etkisi
figure, figcaption ve medya öğeleri
Geçerli (valid) HTML yazma alışkanlığı

Modül 4

Formlar ve Girdiler

form, label ve input temel yapısı
Metin, e-posta, şifre ve sayı girdileri
Seçim kutusu, radyo ve açılır menü
required ve pattern ile tarayıcı doğrulaması
Form erişilebilirliği ve etiket ilişkisi
Gönderim yöntemi ve action kavramı

Günün hedefiKatılımcı CSS seçicileri ve kutu modelini kavrar, Flexbox ve Grid ile düzen kurar, medya sorgularıyla duyarlı tasarım uygular ve değişkenlerle stili düzenler.

Modül 1

Seçiciler ve Özgüllük

Eleman, sınıf ve kimlik seçicileri
Birleşik ve alt öğe seçicileri
Özgüllük (specificity) ve öncelik kuralı
Pseudo-class ve pseudo-element
Kalıtım ve cascade (basamaklama) mantığı
CSS'in HTML'e bağlanma yöntemleri

Modül 2

Kutu Modeli ve Boyut

Content, padding, border ve margin katmanları
box-sizing ile boyut hesaplama
Blok, satır içi ve inline-block gösterim
Margin çökmesi (collapse) davranışı
Genişlik, yükseklik ve taşma (overflow)
Birim seçimi: px, em, rem ve yüzde

Modül 3

Flexbox ve Grid Düzen

Flexbox ile tek eksenli hizalama
justify-content ve align-items kullanımı
flex-grow, shrink ve basis mantığı
Grid ile iki boyutlu sayfa düzeni
Satır, sütun ve boşluk (gap) tanımı
Flexbox ile Grid arasında seçim

Modül 4

Duyarlı Tasarım İlkeleri

Medya sorgularıyla kırılma noktaları
Mobil öncelikli (mobile-first) yaklaşım
Esnek görsel ve akışkan tipografi
CSS değişkenleriyle tema ve tutarlılık
Geçiş (transition) ile basit animasyon
Viewport meta etiketinin rolü ve ayarı

Günün hedefiKatılımcı JavaScript ile değişken, tip ve operatörleri kullanır, fonksiyon ve kapsamı kavrar, dizi ve nesne yöntemlerini ve ES6 özelliklerini uygular.

Modül 1

Temel Söz Dizimi

let, const ve var ile değişken tanımı
İlkel tipler ve tip dönüşümleri
Operatörler ve karşılaştırma kuralları
if ve switch ile koşullu akış kontrolü
for ve while ile döngü yapıları
Template literal ile metin birleştirme

Modül 2

Fonksiyonlar ve Kapsam

Fonksiyon tanımı, çağrısı ve dönüşü
Ok fonksiyonları ve kısa söz dizimi
Parametre, varsayılan değer ve return
Kapsam (scope) ve hoisting davranışı
Closure ile durum saklama mantığı
Geri çağırma (callback) fonksiyonları

Modül 3

Dizi ve Nesne İşlemleri

Dizi oluşturma ve öğelere erişim
map, filter ve reduce yöntemleri
Nesne tanımı ve özellik erişimi
Destructuring ile değer çıkarma
Spread ve rest operatörlerinin kullanımı
JSON yapısı ve ayrıştırma işlemi

Modül 4

Modern JavaScript

ES6 modül import ve export kullanımı
Opsiyonel zincir ve nullish birleştirme
Dizi ve nesne üzerinde yineleme
Hata yönetimi için try/catch kullanımı
Strict mod ve iyi kodlama alışkanlıkları
Konsol ve DevTools ile hata ayıklama

Günün hedefiKatılımcı DOM ile öğeleri seçip değiştirir, olayları dinler, asenkron kod ve fetch ile veri çeker, öğrendiklerini etkileşimli bir web projesinde birleştirir.

Modül 1

DOM Manipülasyonu

querySelector ile öğelerin seçimi
textContent ve innerHTML ile içerik değişimi
Öznitelik ve sınıf (classList) yönetimi
Öğe oluşturma ve DOM ağacına ekleme
Stil ve görünürlüğün koddan değiştirilmesi
DOM ağacında gezinme ve ebeveyn erişimi

Modül 2

Olay Yönetimi ve Dinleme

addEventListener ile olay dinleme
Olay nesnesi ve hedef (target) erişimi
Tıklama, girdi ve klavye olayları
Olay yayılımı ve delegasyon deseni
preventDefault ile varsayılanı engelleme
Form gönderiminin kodla ele alınması

Modül 3

Asenkron Kod ve Fetch

Senkron ve asenkron kod ayrımı
Promise ile asenkron sonuç yönetimi
async/await ile okunur asenkron kod
fetch ile API'den veri çekme işlemi
JSON yanıtının işlenmesi ve gösterimi
Hata ve yüklenme durumlarının yönetimi

Modül 4

Bitirme Projesi Uygulaması

HTML, CSS ve JS'in tek projede birleştirilmesi
Bir API'den veri çekip listeleme
Kullanıcı etkileşimiyle içeriği güncelleme
Duyarlı ve erişilebilir düzen uygulaması
Kodun düzenlenmesi ve temiz yapı
Projenin tarayıcıda yayına hazırlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Semantik HTML

Semantik etiketlerle anlamlı, erişilebilir ve geçerli belge yapıları kurar, form ve medya öğelerini doğru kullanırsınız.

✅

Modern CSS

Seçiciler, kutu modeli ve cascade mantığını kavrar, net ve bakımı kolay stil kuralları yazabilirsiniz.

✅

Flexbox ve Grid

Flexbox ve Grid ile esnek sayfa düzenleri kurar, iki boyutlu yerleşimi ihtiyaca göre tasarlarsınız.

✅

Duyarlı tasarım

Medya sorguları ve mobil öncelikli yaklaşımla her ekran boyutuna uyum sağlayan arayüzler geliştirirsiniz.

✅

JavaScript dili

Değişken, fonksiyon, dizi ve nesne yöntemleriyle ES6 özelliklerini kullanarak program mantığı kurarsınız.

✅

DOM ve olaylar

DOM ile öğeleri seçip değiştirir, olayları dinleyerek statik sayfaları etkileşimli arayüzlere dönüştürürsünüz.

✅

Asenkron ve veri

Promise ve async/await ile asenkron kodu, fetch ile API'den veri çekmeyi ve durumları yönetmeyi öğrenirsiniz.

✅

Bütünsel proje

HTML, CSS ve JavaScript'i tek bir duyarlı ve etkileşimli projede birleştirip tarayıcıda yayına hazırlarsınız.

Kimler İçin Uygundur?

Ön yüz geliştirmeye yeni başlayan veya temellerini düzene sokmak isteyen
React gibi kütüphanelere geçmeden önce HTML
CSS
JavaScript'i doğru öğrenmek isteyen öğrenciler ve meslek değiştiren geliştirici adayları için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Ön yüz geliştirmeye yeni başlayan veya temellerini düzene sokmak isteyenler için uygundur. React gibi kütüphanelere geçmeden önce HTML, CSS ve JavaScript'i doğru öğrenmek isteyen öğrenciler ve meslek değiştiren geliştirici adayları eğitimden en çok verimi alır.

Hiç kod bilmeyen biri katılabilir mi?

Evet. Eğitim web'in nasıl çalıştığından ve en temel HTML etiketlerinden başlar, kademeli olarak CSS ve JavaScript'e ilerler. Günlük bilgisayar kullanımı ve mantıksal düşünme alışkanlığı yeterlidir; her kavram küçük bir proje üzerinde uygulamalı olarak gösterilir.

Eğitim sonunda hangi çerçeveye geçebilirim?

Bu program temeli kurar; tamamladığınızda React, Vue veya Angular gibi kütüphanelere sağlam bir zeminle geçebilirsiniz. HTML, CSS, DOM ve modern JavaScript'i anlamak, bu çerçeveleri yüzeyden değil temelden kavramanızı sağlar.

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. Küçük bir web projesi dört gün boyunca yapı, stil, etkileşim ve veri aşamalarıyla adım adım işler hale getirilir. Yüz yüze veya online yapılabilir ve içerik katılımcı 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 eğitim boyunca geliştirilen web projesini belgeler; kurumsal gruplara katılımcıların hedef teknoloji yoluna göre uyarlanmış içerikle sunulabilir.

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

FSD PROGRAMMING LANGUAGES: FSD FRONT-END PRIMER EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Web Nasıl Çalışır

HTML Belge Yapısı

Semantik HTML Etiketleri

Formlar ve Girdiler

Seçiciler ve Özgüllük

Kutu Modeli ve Boyut

Flexbox ve Grid Düzen

Duyarlı Tasarım İlkeleri

Temel Söz Dizimi

Fonksiyonlar ve Kapsam

Dizi ve Nesne İşlemleri

Modern JavaScript

DOM Manipülasyonu

Olay Yönetimi ve Dinleme

Asenkron Kod ve Fetch

Bitirme Projesi Uygulaması

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

FSD Front-End Development: Frameworks Eğitimi

FSD Front-end Development: Server Tools Eğitimi

FSD Front-end Development: Testing Tools Eğitimi

FSD Front-End Development: UI Development with ReactJS Eğitimi

Full Stack Web Geliştirme Eğitimi

Go ile Web Programlama Eğitimi