Web Tasarım Eğitimi

 HTML nedir?
 Paragraf Etiketi
 Metinlerin Biçimlendirilmesi
 Başlıklar - Yatay Çizgi - Yorum Yapma
 Uygulama 1 - İletişim Sayfası Hazırlama
 Meta etiketi ve HTML etiketleri Öz Nitelikleri
 Img Etiketi - Resim Ekleme
 a etiketi - Link Verme
 ol ve ul etiketleri - Sıralı ve Sırasız Listeler
 Uygulama 2 - Türlerine göre film listesi
 table etiketi - Tablo Oluşturma
 Uygulama 3 - Haftalık Program Oluşturma
 Inline ve Block Elementleri
 div etiketi - Bölme Etiketi
 Form Etiketi - Form Oluşturma
 Uygulama 4 - Iletişim Formu Oluşturma
 Renkler ve Kullanımları
 HTML 5 Semantic Elements - Anlamsal Etiketler (Ufak Bilgilendirme)
 Örnek 1 - HTML 5 Semantic Elements - Anlamsal Etiketler
 Ses ve Video Ekleme
 Progress Bar - Ilerleme Çubuğu
 IFrames - Siteye html dosyalarını ve hazır videoları gömme
 CSS3 'e giriş
 Inline (Satır içi) CSS - Embedded/Internal (Dahili) CSS - External (Harici) CSS
 Selectors - Seçiciler
 CSS'te kalıtım - CSS'te öncelik
 Group Selectors - Gruplayarak Seçme
 Sözde Sınıfa Göre Seçme - Sözde Etikete Göre Seçme - Özelliğe Göre seçme
 Text (Metin) düzenlemesi - ***Font-family (Yazı tipi ailesi)***
 Text (Metin) - font-size (yazı tipi boyutu) ( em ve rem nedir?)
 Text (Metin) - font-style (yazı tipi stili)
 Text (Metin) - font-weight
 Text (Metin) - font-variant (yazı tipi çeşidi)
 Text (Metin) - color (yazı tipi rengi)
 Text (Metin) - Text-align - (Metin Hizalama)
 Text (Metin) - text-decoration (metin süslemesi)
 Text (Metin) - text-shadow (metin gölgesi)
 Text (Metin) - text-transform (metin dönüşümü)
 Text (Metin) - letter-spacing (Harf boşluğu)
 Text (metin) - Word Spacing (kelime boşluğu) ve White Spacing (boşlukları d
 HTML BOX MODEL (Html kutu modeli)
 Borders (Kenarlıklar)
 Width and Height (Genişlik ve Yükseklik)
 Background (Arka plan)
 Uygulama 1 - Sayfa Tasarımı - Mini Responsive Tasarım
 List Style (Liste Stili)
 Table Style (Tablo Stili)
 Link Style (Link Stili)
 Mouse Cursor Style (Fare Imleci Stili )
 Display Property (Görüntü özelliği)
 Visibility Property (Görünürlük özelliği)
 Display Property (Görüntü özelliği) (Inline-block)
 Position (Elementlerin Pozisyonlarını Belirleme)
 Float (Kaydırma)
 Overflow (Taşma)
 Margin (Kenar Boşluğu)
 Padding (Dolgu)
 Box-Sizing and Line-Height (Kutu Boyutu ve Satır Yüksekliği)
 z-index (Derinlik)
 Browser Prefixes (Tarayıcı önekleri)
 Border-Radius (Kenarlık Yarıçapı)
 Box shadow (Kutu gölgesi)
 Flexbox Giriş
 flex-direction
 flex-wrap
 justify-content
 align-items align-content
 flex-flow
 order
 align-self
 flex-basis flex-grow flex-shrink
 Flexbox Özet - Aklınızda soru işareti kalmayacak
CSS – GRİD (4 saat)
 Grid Giriş
 Grid sisteminde satır ve sütun sayılarını belirleme
 Bir elemanı ızgara sistemi üzerinde istediğimiz satır ve sütuna yerleştirme
 Satır ve sütunlar arasında boşluk bırakma
 Grid-area
 Grid order
 justify-items align-items
 Sayfamız üzerinde tam hakimiyeti sağlama
 CSS Grid Özet - Aklınızda soru işareti kalmayacak


 Javascript'e GİRİŞ
 Değişken Kavramı
 Değişkenler (Detaylı)
 Matematik Operatörleri
 Atama Operatörleri
 Karşılaştırma Operatörleri
 Mantıksal Operatörler
 Kontrol Yapıları ( If - else if - else )
 Kontrol Yapıları ( Switch - Case )
 Döngüler (For döngüsü)
 Döngüler (While Döngüsü)
 Döngüler (Do-While Döngüsü)
 Break ve Continue
 Fonksiyonlar
 Alert Box - Prompt Box - Confirm Box
 Objeler (Nesneler)
 Arrays (Diziler)
 Arrays (Diziler) 2
 Matematik Fonksiyonlarından Bazıları
 Date Object (Tarih objesi)
 DOM'a Giriş
 Elemanları Seçme İşlemleri
 Elemanların özelliklerini değiştirme
 Elemanların stillerini değiştirme
 Element Oluşturma (Create)
 Element Silme (Delete)
 Element Güncelleme (Update)
 Animasyon Oluşturma
 Events (Olaylar)
 Event Listeners (Olay dinleyiciler)
 Uygulama 1 - Slider
 Uygulama 2 - Form Kontrolü


 JQuery Kütüphanesini Tanıyalım
 Elemanların hazır olması ve gizleme
 Selectors (Seçiciler)
 Elemanların Özelliğini kullanma ve değiştirme
 Elemanların Özelliğini Silme
 Elemanların Içeriğini Kullanma ve Değiştirme
 Get-Set mantığı ve Val() metotu
 Yeni element ekleme ve var olan elementlere içerik ekleme
 Elementlere Class Ekleme ve Silme İşlemleri
 Elementlere Stil Ekleme ve Elementlerin Stillerini Değiştirme
 Elementlerin boyutlarıyla ilgili işlemler
 DOM Ağacı Üzerinde Manipülasyonlar
 Handling Events (Isleme Olaylari)
 Event Object (Olay Objesinin Kullanımı)
 Uygulama 1 - To do list - Yapılacaklar Listesi Uygulaması
 Animasyon - Gizleme ve Gösterme Animasyonları
 Animasyon -Fade In-Out Animasyonları
 Animasyon - Slide Up-Down Animasyonları
 Kendi animasyonlarımızı oluşturma
 Bootstrap nedir ? Bootstrap Kurulumu.
 Bootstrap Grid Sistemi (Izgara Sistemi)
 Grid Sistemi Parent Child
 Breakpoints (Geçiş noktaları belirleme)
 Renkler
 Font-size (Yazı boyutu)
 Margin ve Padding
 Borders
 Boyutlandırma
 Metin Hizalama
 Display
 Butonlar
 Tablolar
 Listeler
 Liste Grupları
 Uyguluma 1 - Alerts ve Alert'ları kullanarak Liste Uygulaması
 Image (Resim)
 Float
 Form
 Input Groups
 Cards (Kart görünümü)
 Jumbotron
 Breadcrumb
 Dropdowns (Açılır - Kapanır menü yapımı)
 Uygulama 2 - Navbar ve güzel bir menü yapımı
 Carousel (Slider yapma)
 Modal
 Pagination
 Kalan sınıfların açıklaması