Styling Page Elements ve Data Eğitimi

Eğitim Hakkında

Sayfa öğelerinin ve veri gösterimlerinin stil ile biçimlendirilmesi

Bu temel seviye eğitim, web sayfalarındaki öğeleri ve özellikle veri gösterimlerini (tablo, liste, kart, gösterge) stil ile okunur ve tutarlı biçimde sunmayı öğretir. CSS temelleri (seçiciler, kutu modeli), tipografi ve renk sistemi, Flexbox/Grid ile yerleşim, tablo ve liste biçimlendirme, veriye göre koşullu stil (durum renkleri, vurgular), responsive tasarım ve erişilebilirlik işlenir. Düşük kod platformları ve raporlama araçlarındaki tema/stil ayarları da ele alınır.

Süre ve Format

2 Gün. Her gün dört modül; katılımcılar CSS temelinden koşullu veri stiline ilerler.

Seviye

Temel Seviye — Sayfa öğelerini ve veri gösterimlerini stil (CSS/tema) ile biçimlendirme.

Öğrenme Metodu

Katılımcılar örnek sayfalarda tablo, kart ve göstergeleri stil vererek adım adım biçimlendirerek öğrenir.

Neden Bu Eğitim?

🎨Tutarlı Görünüm

Tipografi ve renk sistemiyle her sayfaya tutarlı bir stil verirsiniz.

📊Okunur Veri

Tablo ve göstergeleri biçimlendirerek veriyi kolay okunur kılarsınız.

📱Responsive

Grid/Flexbox ile her ekranda düzgün görünen sayfalar kurarsınız.

Anahtar Konular

css stilsayfa biçimlendirmeveri görselleştirmeflexboxcss gridtablo stilikoşullu biçimlendirmeresponsive tasarımerişilebilirliktipografi

“İyi biçimlendirilmiş veri, bir bakışta anlaşılandır.”

Ön Koşullar

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

1

HTML Temeli

Temel HTML yapısı ve etiketlerine aşinalık gerekir.

2

Web Fikri

Tarayıcı ve sayfa yapısı kavramlarına aşinalık faydalıdır.

3

Editör

Bir kod editörü ve tarayıcı erişimi gerekir.

4

Örnek Veri

Biçimlendirilecek örnek tablo/liste alıştırmaları somutlaştırı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ı, CSS ile öğeleri biçimlendirip modern yerleşim kurabilir.

Modül 1

CSS Temeli

Seçiciler (class/id/öğe)
Özgüllük (specificity)
Kutu modeli (margin/padding)
Birimler (px/rem/%)
Renk ve arka plan
Değişkenler (custom properties)

Modül 2

Tipografi

Font ailesi ve ölçek
Satır yüksekliği
Ağırlık ve stil
Hiyerarşi (başlık/metin)
Okunabilirlik
Web fontları

Modül 3

Flexbox

Flex container/item
Yön ve sarma
Hizalama (justify/align)
Boşluk (gap)
Esnek büyüme
Tipik düzenler

Modül 4

Grid

Grid şablonu
Satır/sütun tanımı
Alan (area) yerleşimi
Responsive grid
Flex vs Grid seçimi
Pano düzeni

Günün hedefiKatılımcı, veri gösterimlerini biçimlendirip duruma göre stil uygulayabilir.

Modül 1

Tablo Stili

Tablo yapısı biçimlendirme
Zebra (alternatif satır)
Hizalama ve boşluk
Sabit başlık
Sayı hizalama
Okunur tablo

Modül 2

Liste ve Kart

Liste biçimlendirme
Kart (card) tasarımı
Gölge ve kenarlık
Durum rozeti (badge)
Boş durum
Kart grid'i

Modül 3

Koşullu Veri Stili

Değere göre renk
Durum renkleri (yeşil/kırmızı)
Eşik vurgusu
Mini gösterge (sparkline fikri)
İkon ile durum
Erişilebilir renk

Modül 4

Responsive ve Erişilebilirlik

Medya sorguları
Mobil uyum
Kontrast ve WCAG
Odak (focus) durumu
Tema (açık/koyu)
Uçtan uca örnek

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

CSS Temeli

Seçiciler ve kutu modeliyle öğeleri biçimlendirirsiniz.

✅

Tipografi

Okunur bir tipografi hiyerarşisi kurarsınız.

✅

Yerleşim

Flexbox ve Grid ile düzenleri oluşturursunuz.

✅

Tablo Stili

Veri tablolarını okunur biçimde biçimlendirirsiniz.

✅

Kart/Liste

Kart ve liste gösterimlerini tasarlarsınız.

✅

Koşullu Stil

Veri değerine göre durum stili uygularsınız.

✅

Responsive

Medya sorgularıyla mobil uyum sağlarsınız.

✅

Erişilebilirlik

Kontrast ve odak ile erişilebilir tasarım yaparsınız.

Kimler İçin Uygundur?

Web içeriği hazırlayanlar
rapor/portal tasarlayanlar
veriyi görsel olarak biçimlendirmek isteyenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web içeriği hazırlayanlar, rapor/portal tasarlayanlar ve veriyi görsel olarak biçimlendirmek isteyenler için uygundur.

Programlama bilmem gerekir mi?

Hayır; temel HTML yeterlidir, CSS sıfırdan uygulamalı öğretilir.

Düşük kod platformlarında işime yarar mı?

Evet; CSS ve stil ilkeleri Power Pages gibi platformların tema/stil ayarlarına doğrudan uygulanabilir ve eğitim buna değinir.

Koşullu veri stili nedir?

Verinin değerine göre renk/vurgu uygulamaktır (örneğin negatif değerleri kırmızı gösterme); eğitim bunu erişilebilir biçimde yaptırır.

Eğitim sonunda sertifika veriliyor mu?

Katılım ve değerlendirme sonrası Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

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

STYLING PAGE ELEMENTS & DATA EĞİTİMİ