Bootstrap & Dashboards Eğitimi — Yönetim Paneli

Eğitim Hakkında

Grid sisteminden kartlara, navbar ve sidebar'dan Chart.js ile veri görselleştirmeye

Bootstrap & Dashboards Eğitimi, Bootstrap 5 ile modern bir yönetim paneli arayüzünü sıfırdan kurmayı öğretir. Katılımcılar önce grid sistemini, breakpoint'leri ve flex yardımcı sınıflarını uygular; ardından navbar, sidebar, kart, tablo ve liste gibi dashboard bileşenlerini birleştirir. Program, Chart.js ile grafik entegrasyonu, koyu tema, yardımcı sınıf (utility) kullanımı ve Sass ile özelleştirmeyle tamamlanarak gerçek bir panel projesi ortaya çıkarır.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımın ardından aynı dashboard adım adım büyütülerek grid, bileşen ve grafik kararlarının sonuçları canlı gösterilir.

Seviye

Orta Seviye — Bootstrap 5 bileşenleriyle duyarlı yönetim paneli (dashboard) arayüzü kurmayı öğreten program

Öğrenme Metodu

Tek bir panel örneği grid iskeletinden başlayarak bileşen bileşen kurulur; her adımda duyarlı davranış tarayıcıda test edilir.

Neden Bu Eğitim?

🎯Hızlı arayüz kurma

Hazır Bootstrap bileşenleriyle sıfırdan CSS yazmadan tutarlı ve duyarlı bir yönetim paneli arayüzünü kısa sürede kurarsınız.

📊Veri görselleştirme

Chart.js grafiklerini kartlar içine yerleştirerek sayıları okunabilir panolara dönüştürmeyi uygulamalı öğrenirsiniz.

🧩Yeniden kullanım

Kart, tablo ve sidebar gibi bileşenleri bir kez kurup tüm panel boyunca tutarlı biçimde yeniden kullanmayı kavrarsınız.

Anahtar Konular

bootstrap eğitimibootstrap dashboard eğitimiyönetim paneli tasarımıbootstrap 5 kursuduyarlı dashboardchart.js eğitimiön yüz geliştirme eğitimiadmin panel bootstrapbootstrap grid eğitimiweb arayüz kursu

“İyi bir panel karmaşık değil nettir; hazır bileşenler doğru grid üzerine oturduğunda veri kendiliğinden okunur hale gelir.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve araçlar

1

HTML bilgisi

Etiket, nitelik ve belge yapısına dair temel HTML bilgisi bileşenleri yerleştirmeyi kolaylaştırır.

2

CSS temeli

Sınıf seçicileri, kutu modeli ve renk gibi temel CSS kavramlarına aşinalık özelleştirmeyi hızlandırır.

3

Tarayıcı araçları

Geliştirici araçlarını açıp öğeleri inceleyebilmek duyarlı davranışı test etmeyi kolaylaştırır.

4

Kod düzenleyici

VS Code gibi bir editör ve canlı sunucu eklentisiyle çalışabilir durumda olmak 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ı Bootstrap'ı projeye dahil eder, container ve 12 kolonlu grid ile sayfayı böler ve breakpoint'lerle farklı ekranlara uyumlu bir iskelet kurar.

Modül 1

Bootstrap'ı Projeye Dahil Etme

CDN bağlantısıyla hızlı başlangıç ve dosya ekleme
CSS ve JS bundle dosyalarının doğru sırada eklenmesi
Popper içeren bundle ile ayrı dosya arasındaki fark
Sürüm seçimi ve kararlı (stable) sürüm takibi
Starter template ile temel HTML iskeleti kurma
viewport meta etiketinin duyarlılık için gerekliliği

Modül 2

12 Kolonlu Grid Sistemi

container ile sabit ve container-fluid ile tam genişlik
row ve col sınıflarıyla içeriği sütunlara bölme
col-6, col-4 gibi sabit kolon genişlikleri belirleme
Otomatik genişlik için sınıfsız col kullanımı
offset ile kolonları sağa kaydırma
g-3 gibi gutter sınıflarıyla kolon arası boşluk

Modül 3

Breakpoint ve Duyarlı Kolonlar

sm, md, lg, xl ve xxl breakpoint eşiklerinin mantığı
col-md-6 ile belirli ekrandan itibaren düzen değişimi
Mobilde tek sütun, masaüstünde çok sütun kurgusu
d-none ve d-md-block ile ekrana göre gizle-göster
order sınıflarıyla kolon sırasını ekrana göre değiştirme
Ekran kırılımlarının tarayıcıda test edilmesi

Modül 4

Flexbox Yardımcı Sınıfları

d-flex ile öğeleri esnek kutuya çevirme
justify-content ile ana eksende hizalama
align-items ile çapraz eksende hizalama
flex-column ile dikey dizilime geçiş
flex-wrap ve flex-grow ile esnek dağılım
ms-auto ile öğeyi kenara itme tekniği

Günün hedefiKatılımcı navbar ve offcanvas sidebar kurar, bilgi kartları ve veri tablolarıyla içeriği düzenler ve rozet, liste grubu gibi bileşenlerle panel iskeletini tamamlar.

Modül 1

Navbar ve Üst Çubuk

navbar ve navbar-expand ile duyarlı üst çubuk
Marka (brand), menü ve arama alanı yerleşimi
navbar-toggler ile mobilde açılır menü düğmesi
dropdown menü ile kullanıcı ve bildirim listesi
sticky-top ile çubuğu sayfa üstünde sabitleme
Renk şeması için bg ve data-bs-theme kullanımı

Modül 2

Offcanvas Sidebar

offcanvas ile kenardan açılan yan menü
data-bs-toggle ile sidebar'ı tetikleme
nav ve nav-pills ile dikey menü bağlantıları
Aktif bağlantının active sınıfıyla vurgulanması
Mobilde gizli, masaüstünde sabit sidebar düzeni
İkonlarla menü öğelerini görsel zenginleştirme

Modül 3

Kartlar ve Özet Kutuları

card, card-body ve card-header yapısı
Özet metrik kartlarıyla KPI gösterimi
card-title ve metin yardımcılarıyla içerik düzeni
Grid içinde kartları eşit yükseklikte hizalama
Renk ve border yardımcılarıyla kart vurgusu
İkon ve rozetle kart içi durum gösterimi

Modül 4

Tablolar ve Liste Grupları

table ve table-striped ile okunur veri tablosu
table-responsive ile dar ekranda yatay kaydırma
table-hover ve hizalama sınıflarıyla düzen
list-group ile sıralı etkinlik veya bildirim listesi
badge ile satır içi sayaç ve durum etiketi
Boş durum (empty state) için yer tutucu tasarımı

Günün hedefiKatılımcı Chart.js ile kartlara grafik ekler, koyu temayı etkinleştirir, yardımcı sınıfları özelleştirir ve panelin tamamını duyarlı bir proje olarak birleştirir.

Modül 1

Chart.js ile Grafikler

Chart.js kütüphanesinin panele eklenmesi
canvas öğesini kart içine yerleştirme
Çizgi grafiğiyle zaman serisi gösterimi
Çubuk ve halka (doughnut) grafik örnekleri
Grafiği kabın boyutuna duyarlı hale getirme
Renk ve efsane (legend) ayarlarıyla okunurluk

Modül 2

Koyu Tema ve Renkler

data-bs-theme=dark ile yerleşik koyu tema
Açık ve koyu tema arasında geçiş düğmesi
CSS değişkenleriyle tema renklerini okuma
Grafik renklerinin temaya göre uyarlanması
Kontrast ve okunabilirlik için renk seçimi
Tema tercihinin localStorage ile hatırlanması

Modül 3

Yardımcı Sınıf (Utility) API

Boşluk için m ve p yardımcı sınıfları
Metin, arka plan ve kenarlık renk yardımcıları
shadow ve rounded ile görsel derinlik
Utility API ile yeni yardımcı sınıf üretme
Yardımcı sınıflarla tekrarlı CSS'ten kaçınma
Duyarlı yardımcılarla ekrana göre boşluk ayarı

Modül 4

Sass ile Özelleştirme

Bootstrap kaynağını Sass ile içe aktarma
$primary gibi değişkenlerle marka rengi değişimi
Sadece gerekli bileşenleri içe aktararak küçültme
Harita (map) değişkenleriyle breakpoint düzenleme
Derleme ile özel bir bootstrap.css üretme
Panelin tek projede duyarlı biçimde birleştirilmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Grid ile düzen kurma

12 kolonlu grid ve breakpoint'lerle farklı ekranlara uyumlu panel iskeletini hızlıca tasarlayabilirsiniz.

✅

Bileşen kullanımı

Navbar, kart, tablo ve liste gibi hazır bileşenleri birleştirerek tutarlı bir dashboard arayüzü kurabilirsiniz.

✅

Duyarlı davranış

Yardımcı sınıflar ve breakpoint'lerle mobilden masaüstüne bozulmayan esnek bir panel düzeni oluşturabilirsiniz.

✅

Sidebar ve navigasyon

Offcanvas sidebar ve navbar ile panel gezinmesini kurup aktif bağlantıları vurgulamayı uygularsınız.

✅

Veri görselleştirme

Chart.js grafiklerini kartlara yerleştirerek sayısal verileri okunur panolar haline getirebilirsiniz.

✅

Tema yönetimi

Yerleşik koyu temayı etkinleştirir, açık-koyu geçiş kurar ve tercihi tarayıcıda hatırlatabilirsiniz.

✅

Yardımcı sınıf ustalığı

Boşluk, renk ve gölge yardımcı sınıflarıyla tekrarlı CSS yazmadan görsel düzeni hızla ayarlayabilirsiniz.

✅

Sass özelleştirme

Sass değişken ve haritalarıyla marka rengini ve breakpoint'leri değiştirip hafif bir sürüm derleyebilirsiniz.

Kimler İçin Uygundur?

Hazır bir arayüz çatısıyla hızlı panel geliştirmek isteyen ön yüz geliştiricileri
yönetim paneli kurması gereken yazılımcılar
duyarlı dashboard tasarımını öğrenmek isteyen bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Hazır bir arayüz çatısıyla hızlı panel geliştirmek isteyen ön yüz geliştiricileri, yönetim paneli kurması gereken yazılımcılar ve duyarlı dashboard tasarımını öğrenmek isteyen öğrenciler için uygundur. Temel HTML ve CSS bilgisi yeterlidir.

Hangi Bootstrap sürümü işleniyor?

Eğitim güncel Bootstrap 5 sürümü üzerinden ilerler. jQuery bağımlılığı olmayan, CSS değişkenleri ve yerleşik koyu tema gibi modern özellikleri kullanan yapı temel alınır ve örnekler bu sürüme göre kurulur.

Grafikler nasıl ekleniyor?

Grafikler Chart.js kütüphanesiyle eklenir. Kart bileşeni içine yerleştirilen canvas öğesi üzerinde çizgi, çubuk ve halka grafik örnekleri kurulur; grafiklerin kabın boyutuna duyarlı davranması uygulamalı gösterilir.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Tek bir panel örneği adım adım büyütülerek grid, bileşen ve grafik kararları tarayıcıda test edilir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacı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 kurulan dashboard 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

BOOTSTRAP & DASHBOARDS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Bootstrap'ı Projeye Dahil Etme

12 Kolonlu Grid Sistemi

Breakpoint ve Duyarlı Kolonlar

Flexbox Yardımcı Sınıfları

Navbar ve Üst Çubuk

Offcanvas Sidebar

Kartlar ve Özet Kutuları

Tablolar ve Liste Grupları

Chart.js ile Grafikler

Koyu Tema ve Renkler

Yardımcı Sınıf (Utility) API

Sass ile Özelleştirme

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Temel Seviye HTML Eğitimi

Temel ve İleri Seviye HTML Eğitimi

Advanced Options & Responsive Web Design Eğitimi

API Development: HTML & Hypermedia Eğitimi

Basic Coding in Adobe Dreamweaver CC Eğitimi

Bootstrap Environment, Requirements, & Setup Eğitimi