WORKING WITH CSS LAYOUTS & THE IONIC FRAMEWORK CLI EĞİTİMİ

Ionic CSS yardımcılarıyla düzen, CLI ile hız

Ionic grid, CSS yardımcı sınıfları, değişkenlerle temalama ve CLI komutlarıyla verimli akış

Working with CSS Layouts & the Ionic Framework CLI Eğitimi, Ionic geliştiricilerine duyarlı düzen ve CLI iş akışında ustalık kazandırır.

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

Eğitim Hakkında

Ionic CSS yardımcı sınıflarından grid düzenine ve CLI komutlarına odaklı uygulamalı eğitim

Working with CSS Layouts & the Ionic Framework CLI Eğitimi, Ionic ile çalışan geliştiricilere iki temel beceride ustalık kazandırır: duyarlı düzen için CSS yardımcı sınıfları ile grid sistemi ve verimli geliştirme için Ionic CLI. Katılımcılar ion-grid ile duyarlı yerleşimi, aralık ve hizalama yardımcı sınıflarını, CSS değişkenleriyle temalamayı ve CLI ile proje oluşturma, bileşen üretme, derleme ve dağıtım komutlarını öğrenir. Eğitimde örnek bir arayüz adım adım kurulur.

Süre ve Format

4 Gün. Her gün dört modül; örnek bir arayüz CSS yardımcı sınıfları ve grid ile kurulur, CLI komutlarıyla üretilir, derlenir ve dağıtılır.

Seviye

Orta Seviye — Ionic geliştiricilerine CSS yardımcı sınıfları, grid düzeni ve Ionic CLI komutlarında ustalık kazandırır

Öğrenme Metodu

Örnek bir Ionic arayüzü dört gün boyunca kurulur; her modülde yeni bir CSS yardımcısı veya CLI komutu canlı olarak uygulanır.

Neden Bu Eğitim?

📐Hızlı duyarlı düzen

Ionic grid ve CSS yardımcı sınıflarıyla farklı ekranlara uyum sağlayan düzenleri satırlarca stil yazmadan hızla kurarsınız.

⚙️CLI ile verimli akış

Ionic CLI komutlarıyla proje, sayfa ve bileşen üretimini, derleme ve dağıtımı otomatikleştirerek geliştirme hızınızı artırırsınız.

🎨Değişkenle tutarlı tema

CSS değişkenleriyle renk ve aralıkları merkezden yöneterek tüm uygulamada tutarlı ve kolay güncellenen bir tema kurarsınız.

Anahtar Konular

ionic css eğitimiionic cli kursuionic grid düzeniduyarlı mobil tasarımionic yardımcı sınıflarionic temalamaionic framework eğitimicss flexbox mobilionic build dağıtımmobil arayüz geliştirme
“Düzeni CSS yardımcılarıyla kurmak ve akışı CLI ile hızlandırmak, Ionic geliştiricisinin en çok zaman kazandıran iki becerisidir.”

Ön Koşullar

Eğitimden en iyi verimi almak için faydalı bilgi ve geliştirme ortamı

1
Temel Ionic bilgisi

Ionic bileşenlerine ve proje yapısına temel aşinalık düzen ve CLI konularını kolaylaştırır.

2
HTML ve CSS

Kutu modeli, flexbox ve temel CSS stil kavramlarına aşinalık düzen konuları için gereklidir.

3
Komut satırı kullanımı

Terminalde temel komut çalıştırma ve klasörde gezinme deneyimi CLI modüllerini kolaylaştırır.

4
Node.js ve CLI

Node.js, npm ve Ionic CLI kurulu, proje oluşturup çalıştırabilir bir ortam gerekir.

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ı Ionic CLI'yi kurar, şablonlarla proje oluşturur, ionic serve ile canlı önizleme yapar ve CLI yapılandırmasıyla temel geliştirme akışını kurar.
Modül 1
Ionic CLI Kurulumu ve Sürümler
  • npm ile Ionic CLI global kurulumu
  • ionic --version ile sürüm doğrulama
  • Node ve npm sürüm uyumluluğu kontrolü
  • CLI yardım komutuyla komut listesi
  • CLI güncelleme ve sürüm yönetimi
  • Çatı bağımlı ve bağımsız komut farkı
Modül 2
ionic start ile Proje Oluşturma
  • ionic start ile yeni proje başlatma
  • blank, tabs ve sidemenu şablonları
  • Angular, React veya Vue çatı seçimi
  • Proje adı ve paket kimliği belirleme
  • Oluşan klasör yapısının tanınması
  • Bağımlılıkların otomatik kurulumu
Modül 3
ionic serve ve Canlı Önizleme
  • ionic serve ile tarayıcıda çalıştırma
  • Canlı yeniden yükleme ile hızlı geliştirme
  • Laboratuvar modunda platform önizleme
  • Belirli port ve adrese uygulamayı sunma
  • Tarayıcı geliştirici araçlarıyla inceleme
  • Derleme hatalarını konsolda okuma
Modül 4
ionic.config ve CLI Ayarları
  • ionic.config.json dosyasının düzeni
  • Proje türü ve çatı ayarının tanınması
  • CLI eklentileri ve entegrasyonlar
  • Ortam değişkenleri ile yapılandırma
  • CLI telemetri ve genel ayarlar
  • Birden fazla projeyi tek yerden yönetme
Günün hedefiKatılımcı ion-grid sistemiyle duyarlı düzenler kurar, satır ve sütun yapısını öğrenir, kırılma noktalarıyla ekrana uyum sağlar ve karmaşık yerleşimleri grid ile düzenler.
Modül 1
ion-grid Temelleri
  • ion-grid, ion-row ve ion-col yapısı
  • On iki sütunlu grid mantığının kavranması
  • Sütun genişliğini size özelliğiyle belirleme
  • Otomatik genişlikli sütun davranışı
  • İç içe grid ile karmaşık yerleşim
  • Grid ve flexbox ilişkisinin anlaşılması
Modül 2
Kırılma Noktaları ve Duyarlılık
  • size-sm, size-md ve size-lg kullanımı
  • Ekran boyutuna göre sütun yeniden düzeni
  • Mobil öncelikli duyarlı tasarım yaklaşımı
  • offset ile sütunları yana kaydırma
  • push ve pull ile sütun sırası değişimi
  • Yatay ve dikey yönelime düzen uyumu
Modül 3
Grid ile Hizalama
  • ion-justify-content ile yatay hizalama
  • ion-align-items ile dikey hizalama
  • Satır içinde sütunları ortalama
  • Eşit yükseklikli sütun düzeni kurma
  • Boşluk ve dolgu ile grid aralıkları
  • Sarma davranışı ile taşan sütunlar
Modül 4
Yerleşim Desenleri
  • Kart ızgarası düzeni oluşturma
  • İki ve üç sütunlu içerik yerleşimi
  • Form alanlarını grid ile hizalama
  • Kenar çubuğu ve ana içerik düzeni
  • Duyarlı galeri yerleşimi kurma
  • Grid ile dashboard benzeri düzen
Günün hedefiKatılımcı Ionic CSS yardımcı sınıflarıyla aralık, metin, renk ve flex düzenini stil yazmadan uygular, görünürlük yardımcılarıyla duyarlı davranışı yönetir.
Modül 1
Aralık Yardımcı Sınıfları
  • ion-padding ile iç boşluk ekleme
  • ion-margin ile dış boşluk ekleme
  • Yön bazlı padding ve margin sınıfları
  • ion-no-padding ile boşluğu kaldırma
  • Tutarlı aralık ölçeğinin kullanımı
  • Boşluk yardımcılarını grid ile birleştirme
Modül 2
Metin ve Hizalama Yardımcıları
  • ion-text-center ile metni ortalama
  • ion-text-start ve ion-text-end hizalama
  • ion-text-uppercase ile metin dönüşümü
  • ion-text-wrap ve nowrap davranışı
  • Duyarlı metin hizalama sınıfları
  • Başlık ve gövde metin biçimlendirme
Modül 3
Flex Yardımcı Sınıfları
  • ion-justify-content yardımcı sınıfları
  • ion-align-items ile dikey hizalama
  • ion-wrap ve nowrap ile sarma kontrolü
  • ion-align-self ile öğe hizalama
  • Flex yardımcılarıyla hızlı yerleşim
  • Grid dışı esnek kutular oluşturma
Modül 4
Görünürlük ve Yüzen Yardımcılar
  • ion-hide ile öğeyi tümüyle gizleme
  • Kırılma noktasına göre gizle ve göster
  • ion-float-start ve end ile yüzdürme
  • Platforma özel görünürlük sınıfları
  • Yardımcı sınıfları birleştirme pratiği
  • Özel CSS yerine yardımcı sınıf seçimi
Günün hedefiKatılımcı CSS değişkenleriyle temayı özelleştirir, ionic generate ile bileşen üretir, ionic build ile üretim derlemesi alır ve CLI ile Capacitor üzerinden platformlara dağıtır.
Modül 1
CSS Değişkenleriyle Temalama
  • Ionic renk değişkenlerini özelleştirme
  • variables dosyasında tema tanımı
  • Açık ve koyu tema değişken grupları
  • ion-color ile özel renk ekleme
  • Aralık ve köşe yarıçapı değişkenleri
  • Değişkenlerle marka temasına uyarlama
Modül 2
ionic generate ile Üretim
  • ionic generate ile sayfa oluşturma
  • Bileşen ve servis dosyası üretme
  • Üretilen dosyaların otomatik kaydı
  • Rota ile üretilen sayfayı bağlama
  • İsimlendirme ve klasör düzeni kuralları
  • CLI üretimiyle tutarlı yapı kurma
Modül 3
ionic build ve Üretim Derlemesi
  • ionic build ile üretim derlemesi alma
  • Üretim ve geliştirme derleme farkı
  • Çıktı klasörü ve varlık düzeni
  • Kaynak küçültme ve optimizasyon
  • Ortam bazlı derleme yapılandırması
  • Derleme çıktı boyutunu inceleme
Modül 4
Capacitor ve CLI Dağıtımı
  • ionic cap add ile platform ekleme
  • ionic cap copy ve sync komutları
  • ionic cap open ile native proje açma
  • ionic cap run ile cihazda çalıştırma
  • PWA olarak web dağıtımı hazırlama
  • Dağıtım öncesi derleme kontrolü

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
CLI ustalığı

Ionic CLI ile proje oluşturur, canlı önizleme yapar ve yapılandırmayı yöneterek verimli bir geliştirme akışı kurarsınız.

✅
Grid düzeni

ion-grid sistemiyle satır ve sütun yapısını kurar, iç içe grid ile karmaşık yerleşimleri düzenli biçimde oluşturursunuz.

✅
Duyarlı tasarım

Kırılma noktaları, offset ve push pull ile farklı ekranlara uyum sağlayan duyarlı düzenleri rahatça tasarlarsınız.

✅
Aralık yardımcıları

ion-padding ve ion-margin yardımcı sınıflarıyla boşlukları tutarlı bir ölçekte, stil yazmadan yönetebilirsiniz.

✅
Flex ve hizalama

Flex ve metin yardımcı sınıflarıyla öğeleri hızla hizalar, grid dışı esnek kutu düzenlerini kolayca oluşturursunuz.

✅
Temalama becerisi

CSS değişkenleriyle renk, aralık ve açık koyu temayı merkezden yöneterek marka temasına uyarlama yapabilirsiniz.

✅
CLI ile üretim

ionic generate ile sayfa ve bileşen üretir, ionic build ile optimize edilmiş üretim derlemesi alabilirsiniz.

✅
Dağıtım akışı

Capacitor komutlarıyla platform ekler, senkronlar ve uygulamayı cihazda çalıştırıp dağıtıma hazır hale getirirsiniz.

Kimler İçin Uygundur?

  • Ionic'e giriş yapmış olup düzen ve stil konusunda derinleşmek isteyen frontend geliştiricileri
  • CLI komutlarıyla iş akışını hızlandırmak isteyen yazılımcılar
  • duyarlı mobil arayüz tasarlayan ekip üyeleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Ionic'e giriş yapmış olup düzen ve stil konusunda derinleşmek isteyen frontend geliştiricileri, CLI komutlarıyla iş akışını hızlandırmak isteyen yazılımcılar ve duyarlı mobil arayüz tasarlayan ekip üyeleri için uygundur. Temel Ionic ve CSS bilgisi faydalı olur.
Ionic grid ile normal CSS grid arasında fark var mı?
Ionic grid, on iki sütunlu bir sistem üzerine kurulu, flexbox tabanlı ve ion-grid, ion-row, ion-col bileşenleriyle kullanılan bir düzen aracıdır. Kırılma noktaları ve offset gibi hazır özellikler sunar; böylece saf CSS grid yazmadan duyarlı mobil düzenleri hızla ve tutarlı biçimde kurabilirsiniz.
Hangi Ionic CLI komutları işleniyor?
Eğitim ionic start ile proje oluşturma, ionic serve ile canlı önizleme, ionic generate ile sayfa ve bileşen üretme, ionic build ile üretim derlemesi ve ionic cap komutlarıyla Capacitor üzerinden platform ekleme, senkronlama ve cihazda çalıştırmayı kapsar. Yapılandırma dosyaları da ele alınır.
CSS yardımcı sınıfları neden kullanılır?
Ionic'in aralık, metin, flex ve görünürlük yardımcı sınıfları, sık tekrar eden stilleri ayrı CSS yazmadan doğrudan şablonda uygulamanızı sağlar. Bu, kod tekrarını azaltır, tutarlı bir aralık ölçeği sunar ve duyarlı davranışı hızlıca eklemenizi kolaylaştırır; eğitim bunları örneklerle gösterir.
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 dört gün boyunca kurulan örnek arayüzü belgeler; eğitim yüz yüze veya online verilebilir ve kurumsal gruplara özel olarak uyarlanabilir.

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. Working with CSS Layouts & the Ionic Framework CLI 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

Çapraz Platform GeliştirmeCross-Platform Solutions in Visual Studio Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Cross-Platform Solutions in Visual Studio Eğitimi

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

Visual Studio ve .NET MAUI ile tek projeden iOS ve Android uygulaması geliştirmeyi XAML, MVVM ve API erişimiyle öğreten uygulamalı kurumsal eğitim.

Detayları Gör →
Çapraz Platform GeliştirmeExploring Ionic JavaScript Basics, Layouts, & Navigation Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Exploring Ionic JavaScript Basics, Layouts, & Navigation Eğitimi

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

Ionic uygulamalarında JavaScript mantığını, ion-grid ile duyarlı yerleşimi ve router ile çok ekranlı gezinmeyi öğreten uygulamalı temel eğitim programı.

Detayları Gör →
Çapraz Platform GeliştirmeFundamentals of the Ionic Framework Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Fundamentals of the Ionic Framework Eğitimi

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

Web teknolojileriyle Ionic çerçevesinin temellerini, bileşen kütüphanesini, tema sistemini ve Capacitor köprüsünü öğreten uygulamalı temel eğitim.

Detayları Gör →
Çapraz Platform GeliştirmeGelişmiş .NET MAUI Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Gelişmiş .NET MAUI Eğitimi

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

CommunityToolkit.Mvvm, Shell, özel handler mimarisi, MAUI Graphics ve performans iyileştirmeyle ileri düzey .NET MAUI geliştirmeyi öğreten eğitim.

Detayları Gör →
Çapraz Platform GeliştirmeIntroduction to React Native Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Introduction to React Native Eğitimi

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

JSX, Hooks, React Navigation, FlatList ve native API ile iOS ve Android için tek kod tabanlı mobil uygulama geliştirmeyi öğreten uygulamalı eğitim.

Detayları Gör →
Çapraz Platform GeliştirmeIonic ile Çapraz Platformlu Mobil Uygulama Geliştirme Eğitimi
Mobil Uygulama Geliştirme Eğitimleri

Ionic ile Çapraz Platformlu Mobil Uygulama Geliştirme Eğitimi

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

Ionic bileşenleri, Capacitor köprüsü ve WebView ile web bilginizden iOS ve Android uygulaması üretip iki mağazaya dağıtmayı öğreten uygulamalı eğitim.

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