Description

Course content

• Giriş
  • Hoşgeldiniz
  • Derslere başlamadan önce yüklememiz gereken araçlar nelerdir?
  • Macbook için VS Code
  • LÜTFEN OKUYUNUZ - Bu duyuru hem sizin hem de benim için oldukça önemlidir !
  • Bir eğitim setine nasıl çalışmalıyız?
  • Youtube Duyuru
• HTML5
  • 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
  • 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)
• CSS3 - FLEXBOX
  • 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
  • İncelemeniz için kaynaklar
• CSS - GRİD
  • 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
  • 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)
• JAVASCRIPT - DOM - (Document Object Model) - (Belge Objesi Modeli)
  • 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
  • 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 4
  • 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ı
• KURSTAN SONRA YAPMANIZ GEREKENLER
  • Tavsiyeler
  • Berber Teması
  • CC BY 3.0 lisansı

web-tasarim-html-css-bootstrap-javascript-jquery.part1.rar

web-tasarim-html-css-bootstrap-javascript-jquery.part2.rar

web-tasarim-html-css-bootstrap-javascript-jquery.part3.rar