Udemy - Web Tasarım| HTML 5 | CSS 3 | BOOTSTRAP 4

Udemy - Web Tasarım| HTML 5 | CSS 3 | BOOTSTRAP 4 | JAVASCRIPT

https://www.udemy.com/course/web-tasarim-html-css-bootstrap-javascript-jquery/

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ı