Anasayfa›Web ve Ön Yüz Geliştirme›HTML ve CSS
Web ve Ön Yüz Geliştirme HTML ve CSS

JQUERY VE BOOTSTRAP İLE UI EĞİTİMİ

jQuery ve Bootstrap ile hızlı arayüzler kurun

jQuery ile DOM, olay ve AJAX; Bootstrap grid ve bileşenlerle responsive arayüz geliştirin

JQuery ve Bootstrap ile UI Eğitimi, hızlı arayüz geliştirmenin iki yaygın aracını uygulamalı öğreten dört günlük bir programdır. Katılımcılar jQuery ile seçiciler, DOM gezinme, olay yönetimi, fade ve slide efektleri ve AJAX istekleri; Bootstrap ile 12 sütunlu…

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

Eğitim Hakkında

jQuery seçicilerinden efekt ve AJAX'a, Bootstrap grid ve bileşenlerine uzanan uygulamalı akış

JQuery ve Bootstrap ile UI Eğitimi, hızlı arayüz geliştirmenin iki yaygın aracını uygulamalı öğretir. Katılımcılar jQuery ile DOM seçimi, olay yönetimi, efektler ve AJAX isteklerini öğrenir. Bootstrap grid sistemi, bileşenleri ve yardımcı sınıflarıyla responsive arayüzleri hızla kurmayı kavrar. Program navigasyon, modal, form ve kart bileşenleriyle ilerler. Katılımcı jQuery etkileşimleri ve Bootstrap bileşenlerini birleştirerek responsive ve dinamik bir arayüz geliştirir.

Süre ve Format

4 Gün. Her gün dört modül; jQuery ile etkileşim, Bootstrap ile responsive arayüz kurulur ve son gün bir panel projesi tamamlanır.

Seviye

Orta Seviye — jQuery ile DOM ve AJAX, Bootstrap ile hızlı ve responsive arayüz kurma

Öğrenme Metodu

jQuery kod örnekleri tarayıcıda denenir; Bootstrap bileşenleri gerçek bir arayüz üzerinde adım adım uygulanır.

Neden Bu Eğitim?

⚡Hızlı geliştirme

jQuery kısa söz dizimi ve Bootstrap hazır bileşenleriyle arayüzleri çok daha az kodla ve hızla ortaya çıkarırsınız.

📐Responsive grid

Bootstrap grid sistemiyle 12 sütunlu yapıyı kullanarak her ekrana uyumlu düzenleri kolayca kurarsınız.

🔄Dinamik etkileşim

jQuery ile olay, efekt ve AJAX kullanarak sayfayı yenilemeden güncellenen dinamik arayüzler geliştirirsiniz.

Anahtar Konular

jquery eğitimibootstrap eğitimijquery bootstrap kursuresponsive tasarım eğitimiön yüz ui eğitimibootstrap grid eğitimijquery ajax eğitimiweb arayüz geliştirmefrontend ui eğitimibootstrap bileşenleri eğitimi
“jQuery etkileşimi hızlandırır, Bootstrap tasarımı düzenler; ikisi birlikte responsive arayüzleri çok daha kısa sürede ortaya çıkarır.”

Ön Koşullar

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

1
HTML ve CSS

Temel HTML yapısı ve CSS stilleri bilgisi Bootstrap sınıflarını kavramak için gereklidir.

2
Temel JavaScript

Değişken, fonksiyon ve olay kavramlarına aşinalık jQuery bölümünü kolaylaştırır.

3
DOM kavramı

Sayfa öğelerinin seçilip değiştirilebildiği fikrine aşinalık faydalıdır.

4
Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı, örnekleri yazıp denemek 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ı jQuery'yi projeye ekler, seçicilerle öğeleri hedefler, DOM'da gezinir ve içerik, nitelik ile stilleri jQuery yöntemleriyle değiştirir.
Modül 1
jQuery'ye Giriş ve Kurulum
  • jQuery CDN ve yerel dosya ile ekleme
  • document ready ve hazır olma kontrolü
  • jQuery nesnesi ve dolar işareti kullanımı
  • jQuery ile saf JavaScript farkı
  • Zincirleme method chaining mantığı
  • noConflict ve sürümler arası farklar
Modül 2
jQuery Seçicileri
  • Etiket, class ve id seçicileri
  • Öznitelik ve CSS tabanlı seçiciler
  • Filtreler first, last, eq ve not
  • Form seçicileri input, checked, selected
  • Hiyerarşik ve soy seçici kullanımı
  • Seçim sonucunda eleman sayısı length
Modül 3
jQuery ile DOM Gezinme
  • parent, children ve find yöntemleri
  • siblings, next ve prev gezinmesi
  • closest ile en yakın atayı bulma
  • filter ve eq ile seçim daraltma
  • each ile seçilen öğelerde döngü
  • Gezinme sonucu zincirleme kullanım
Modül 4
İçerik ve Nitelik Değiştirme
  • text, html ve val ile içerik okuma
  • attr ve prop ile nitelik yönetimi
  • addClass, removeClass ve toggleClass
  • css yöntemiyle satır içi stil atama
  • append, prepend ve after ile ekleme
  • remove ve empty ile öğe ve içerik silme
Günün hedefiKatılımcı jQuery ile olayları yönetir, efekt ve animasyonları uygular ve AJAX istekleriyle sayfayı yenilemeden sunucudan veri alıp gösterir.
Modül 1
jQuery Olay Yönetimi
  • click, hover ve change olayları
  • on ve off ile olay bağlama ve kaldırma
  • Olay delegasyonu ile dinamik öğeler
  • Olay nesnesi ve preventDefault
  • keydown ve keyup klavye olayları
  • trigger ile programatik olay tetikleme
Modül 2
Efektler ve Görünürlük
  • show, hide ve toggle ile görünürlük
  • fadeIn, fadeOut ve fadeToggle efektleri
  • slideUp, slideDown ve slideToggle
  • Efekt süresi ve callback kullanımı
  • animate ile özel CSS animasyonu
  • stop ile animasyon kuyruğu yönetimi
Modül 3
AJAX ile Veri Alma
  • ajax yöntemi ve temel yapılandırma
  • get ve post kısayol yöntemleri
  • JSON verisi alma ve işleme akışı
  • done, fail ve always geri çağırmaları
  • Yükleniyor göstergesi ve hata yönetimi
  • Sunucudan gelen veriyi DOM'a yazma
Modül 4
Form ve Dinamik İçerik
  • serialize ile form verisini toplama
  • Form gönderimini AJAX ile yapma
  • Anlık doğrulama ve geri bildirim
  • Dinamik liste ekleme ve güncelleme
  • Gelen veriye göre içerik filtreleme
  • jQuery eklentilerinin kullanımı
Günün hedefiKatılımcı Bootstrap'ı projeye ekler, 12 sütunlu grid sistemini ve kesme noktalarını kullanarak responsive yerleşimler kurar ve yardımcı sınıfları uygular.
Modül 1
Bootstrap'a Giriş
  • Bootstrap CDN ve dosya ile ekleme
  • container, container-fluid yapısı
  • Mobil öncelikli tasarım yaklaşımı
  • Bootstrap sürümleri ve farkları
  • Özelleştirme ve Sass değişkenleri
  • Bootstrap ikon kütüphanesi kullanımı
Modül 2
Bootstrap Grid Sistemi
  • 12 sütunlu grid ve row yapısı mantığı
  • col ve otomatik genişlik sütunları
  • Kesme noktaları sm, md, lg ve xl
  • Sütun kaydırma offset ve order
  • İç içe grid nested row kullanımı
  • gutter ile sütunlar arası boşluk
Modül 3
Yardımcı Sınıflar
  • Boşluk sınıfları margin ve padding
  • Metin hizalama ve renk yardımcıları
  • display ve görünürlük sınıfları
  • Flex hizalama yardımcı sınıfları
  • Arka plan ve kenarlık yardımcıları
  • Responsive görünürlük kontrolü
Modül 4
Tipografi ve Tablolar
  • Başlık ve metin biçimlendirme sınıfları
  • Liste ve alıntı biçimlendirme stilleri
  • table ve renk varyant sınıfları
  • Responsive tablo sarmalayıcı yapısı
  • Görsel için responsive sınıflar
  • Renk paleti ve tema renk sınıfları
Günün hedefiKatılımcı Bootstrap navigasyon, modal, form ve kart bileşenlerini kullanır ve jQuery etkileşimleriyle birleştirerek responsive bir panel projesi geliştirir.
Modül 1
Navigasyon ve Menü
  • navbar ve responsive menü daraltma
  • nav, tab ve pill menü yapıları
  • dropdown ile açılır menü yapıları
  • breadcrumb ve sayfalama bileşenleri
  • Mobilde hamburger menü davranışı
  • Aktif bağlantı ve durum gösterimi
Modül 2
Modal ve Geri Bildirim
  • modal pencere yapısı ve tetikleme
  • alert ve kapatılabilir uyarılar
  • toast ile anlık bildirim gösterimi
  • spinner ve yükleniyor göstergesi
  • tooltip ve popover ile ipuçları
  • progress ile ilerleme çubuğu gösterimi
Modül 3
Form Bileşenleri
  • form-control ve girdi grupları
  • input-group ve ekli ikon kullanımı
  • select, checkbox ve radio stilleri
  • Form doğrulama durum sınıfları
  • floating label ve yardımcı metin
  • button ve buton grubu bileşenleri
Modül 4
Kart ve Panel Projesi
  • card yapısı ve içerik düzenlemesi
  • accordion ve collapse bileşeni
  • carousel ile görsel döngüsü oluşturma
  • list-group ile liste gösterimi
  • jQuery ile bileşenlere etkileşim ekleme
  • Responsive panel projesinin tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
jQuery seçiciler

jQuery seçicileri ve DOM gezinme yöntemleriyle sayfa öğelerini hızlıca hedefler ve zincirleme ile etkili kod yazarsınız.

✅
DOM manipülasyon

text, html, attr ve classList yöntemleriyle içerik, nitelik ve stilleri jQuery üzerinden dinamik olarak değiştirirsiniz.

✅
Olay ve efekt

jQuery olay yönetimi, fade ve slide efektleriyle kullanıcı etkileşimlerine görsel ve akıcı yanıtlar oluşturursunuz.

✅
AJAX kullanımı

jQuery AJAX ile sayfayı yenilemeden sunucudan veri alır, JSON işler ve sonucu DOM'a dinamik olarak yazarsınız.

✅
Bootstrap grid

12 sütunlu grid sistemini ve kesme noktalarını kullanarak her ekrana uyumlu responsive yerleşimler kurarsınız.

✅
Yardımcı sınıflar

Bootstrap boşluk, flex ve görünürlük yardımcı sınıflarıyla az kodla tutarlı ve düzenli arayüzler oluşturursunuz.

✅
Hazır bileşenler

Navbar, modal, kart ve form bileşenlerini kullanarak profesyonel görünümlü arayüzleri hızla kurarsınız.

✅
Panel projesi

jQuery etkileşimleri ve Bootstrap bileşenlerini birleştirerek responsive ve dinamik bir panel projesini tamamlarsınız.

Kimler İçin Uygundur?

  • Mevcut projelerde jQuery ile çalışan geliştiriciler
  • hızlı prototip
  • responsive arayüz kurmak isteyenler ve Bootstrap ile tutarlı UI oluşturmak isteyen ön yüz geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Mevcut projelerde jQuery ile çalışan geliştiriciler, hızlı prototip ve responsive arayüz kurmak isteyenler ve Bootstrap ile tutarlı UI oluşturmak isteyen ön yüz geliştiriciler için uygundur. Temel HTML, CSS ve JavaScript bilgisi gereklidir.
jQuery hâlâ öğrenmeye değer mi?
Birçok mevcut proje, kurumsal uygulama ve WordPress teması jQuery kullanmaya devam etmektedir. jQuery ile DOM, olay ve AJAX yönetimini bilmek bu projeleri geliştirmek ve bakımını yapmak için hâlâ değerli bir beceridir.
Bootstrap'ın hangi sürümü işleniyor?
Eğitim güncel Bootstrap sürümünü temel alır; grid sistemi, yardımcı sınıflar ve bileşenler güncel yapıya göre işlenir. Sürümler arası temel farklar da kısaca ele alınarak eski projelere uyum kolaylaştırılır.
Eğitim online olarak alınabilir mi?
Evet, eğitim hem online hem yüz yüze verilebilir ve kurumsal taleplere göre uyarlanır. Her iki formatta da katılımcı kendi bilgisayarında kod yazarak örnekleri ve projeyi uygular.
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, katılımcının jQuery ve Bootstrap ile uygulamalı arayüz geliştirdiğini belgeler.

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. JQuery ve Bootstrap ile UI 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
AlanWeb ve Ön Yüz Geliştirme
KonuHTML ve CSS
Sertifika✓ Var
Hemen Bilgi Al
Bilgi için:
+90 (501) 369 40 14
[email protected]
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSGetting Started with HTML and CSS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Getting Started with HTML and CSS Eğitimi

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

Web'in çalışmasından HTML yapısına, CSS stillemeden Flexbox yerleşime ve gerçek bir sayfa projesine sıfırdan HTML ve CSS öğreten başlangıç eğitimi.

Detayları Gör →
HTML ve CSSHTML & Accessibility Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML & Accessibility Eğitimi

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

Semantik HTML, WCAG, klavye ve ekran okuyucu, ARIA ve test araçlarıyla erişilebilir ve kapsayıcı web arayüzleri kurmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSHTML - Content Authoring Fundamentals Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML - Content Authoring Fundamentals Eğitimi

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

HTML belge yapısı, anlamsal etiketler, bağlantı, görsel, tablo ve form ile sıfırdan web içeriği yazma eğitimi. Erişilebilir ve doğrulanmış HTML temeli.

Detayları Gör →
HTML ve CSSHTML - Content Authoring with New and Advanced Features Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML - Content Authoring with New and Advanced Features Eğitimi

5 günİleriOnline / Yüz Yüze / Hibrit

HTML5'in gelişmiş formları, audio/video, Canvas, SVG, Web Storage, IndexedDB ve cihaz API'leriyle zengin içerik geliştirme eğitimi. İleri ve uygulamalı.

Detayları Gör →
HTML ve CSSHTML Controls, Bindings, & Collections Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML Controls, Bindings, & Collections Eğitimi

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

HTML form kontrolleri, tek ve iki yönlü veri bağlama ve koleksiyonları liste, tablo ve ızgaraya bağlama eğitimi. Tepkisel ve performanslı arayüzler.

Detayları Gör →
HTML ve CSSHTML Helpers for ASP.NET MVC Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

HTML Helpers for ASP.NET MVC Eğitimi

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

ASP.NET MVC ve Core için Razor, strongly-typed HTML Helper'lar, EditorFor/DisplayFor şablonları ve Tag Helper'larla form üretimi eğitimi. Uygulamalı ve model od

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