Web Tasarım & Front-end Uzmanlığı Sertifika Programı

Eğitim Programı

Web Tasarıma Giriş

• Web Tasarım nedir?
• Web Tasarım Tarihi ve Gelişimi
• Web Tasarımın Önemi ve Uygulama Alanları
• Internet ve World Wide Web Tarihçesi
• Domain Nedir? Nasıl Satın Alınır? Projeye Uygun Hosting Seçimi
• Hosting Nedir? Nasıl Alınır?
• FTP Nedir?
• Modern Web Tasarım Trendleri
• Front-end ve Back-end Farkları
• Front-end & Back-end Kullanım Alanları
• Web Sitesi Yapısını İnceleyim
• Web-Grafik Tasarım Araçları (Photoshop, Illustrator)
• Temel Prototipleme Araçları (Figma, Adobe XD)
• Web Geliştirme Ortamları (IDE) ve Editörler (VS Code, Note ++, Sublime Text)
• Proje Planlama ve İhtiyaç Analizi
• Kullanıcı Araştırması ve Hedef Kitle Analizi
• Web Projesi Yönetim Araçları (Jira, Trello, Asana)
• FrameWork Nedir? Front-end Frameworklerini İnceleyelim

UI, UX ve Web Tasarım

• UI (Kullanıcı Arayüzü) Nedir?
• Temel UI İlkeleri ve Bileşenleri
• Web Tasarımda Renk Teorisi ve Tipografi
• Web Tasarımda İkonografi ve Görsel Hiyerarşi
• UX Araştırma Yöntemleri
• Kullanıcı Persona ve Senaryoları
• Web Tasarımda Wireframe ve Prototipleme Araçları
• Kullanılabilirlik Testleri, Unit Test ve Geri Bildirim Alma
• Responsive Öncelikli Tasarım Prensipleri
• Medya Sorguları ve Breakpoint’ler
• Responsive Web Tasarım Uygulaması

HTML (Hypertext Markup Language)

• Temel HTML Etiketleri
• HTML Etiketi Anatomisi
• HTML ve HTML5 Farklılıkları
• HTML Sürümlerini Tanıyalım
• HTML Etiketleri Uygulaması
• Kod Editörleri ile Çalışmak
• Tarayıcı Geliştirici Kullanımı (Developer Tools)
• HTML5 Semantik Etiket Kullanımı
• Tek Sayfalık Web Sayfası Oluşturma
• İnternette Web Sitesi Yayınlama
• Dosya Transfer Yöntemleri (FTP)

CSS (Cascading Style Sheets)

• CSS Nedir?
• Yerel, Genel ve Harici CSS
• Temel CSS Özellikleri
• Web Sayfasına Stiller Eklemek
• HTML Etiketlerine Stil Verme ve Yönetme
• CSS Seçicileri ve Özellikleri
• CSS Basamaklandırma (Cascading)
• CSS Özelleştirme (Specification)
• CSS Kalıtsallaştırma (Inheritance)
• CSS Box Styles (Padding, Margin, Box-Sizing Kullanımı)
• CSS Renk ve Kenarlık Uygulamaları
• CSS Font Stilleri ve Metin Uygulamaları
• CSS Çocuk ve Torun Seçiciler (nth-child Kullanımı)
• CSS Display ve Position Özellikleri
• Gelişmiş CSS Teknikleri
• Tarayıcı Uyumlu CSS Yazımı (Cross-browser)
• CSS Flexbox ve Grid Layout Uygulamaları
• CSS Transition Özelliği
• CSS Animasyonlar ve Geçişler
• CSS Medya Sorguları ve Responsive Tasarım (Media Query Kullanımı)
• CSS Tasarım Trendleri
• Responsive Web Sitesi Kodlama
• Custom Properties
• Web Sitesi Projesi Hazırlama

Bootstrap Framework

• Bootstrap Framework Nedir? Ne İşe Yarar?
• Bootstrap Kurulumu ve Yapısı
• Grid Sistem ve Esnek Düzenler
• Temel Bileşenler (Butonlar, Kartlar, Modal vb.)
• Gelişmiş Bootstrap Kullanımı
• Bootstrap ile Responsive Tasarım
• Özelleştirilmiş Temalar ve CSS Entegrasyonu
• Bootstrap Formlar ve Doğrulama
• Bootstrap Framework ile Proje Geliştirme

JavaScript (JS)

• JavaScript Nedir ve Nasıl Kullanılır?
• Kullanım Alanları ve Uygulamalı Örnekler
•  Web Sayfasına JavaScript Entegre Etme
• JavaScript Çıktı Yöntemleri
• HelloWorld Örneği
• Farklı Çıktı Yöntemleri ile HelloWorld Örneği
• Statements Nedir? JavaScript Statements Örnekleri
• Expression Nedir?
• Expression ve Statemens Arasındaki Farklar
• Javascript Değişken (Variable) Deklarasyonu
• Değişken (Variable) Başlatma
• JavaScript’in Tarihçesi ve Sürümleri
• NPM ve Babel ile Modern JavaScript Kullanımı
• JavaScript Değişken Tipleri (Primitive ve Referenced)
• Mutability ve Referenced Data Types
• Variable Scope (Lexical Scope)
• Scope Kavramı
• Lexical Scope
• JavaScript Dizileri (Arrays)
• Gelişmiş JavaScript Array Metotları
• JavaScript Objeleri (Objects)
• Gelişmiş Object Kullanımı
• JavaScript Fonksiyon Tanımlama ve Çağırma
• Fonksiyon Parametreleri ve Default Değerler
• Değer Döndürme ve Return
• Pure Functions
• Hoisting Kavramı
• JavaScript Koşullu İfade Kullanımı
• if, else, if else Yapıları
• Switch-case
• JavaScript Döngüler (for, while, do-while)
• For Döngüsü
• While ve do-while Döngüleri
• Document Object Model (DOM) ile Çalışma
• Dom Nedir? Dom Olayları ve Dinleyiciler
• JavaScript Modülleri (ES6 Modules)
• CommonJS ve AMD Modülleri
• Asenkron JavaScript (setInterval, setTimeout, Promises)
• Zamanlayıcı Fonksiyonlar
• Promises ile Asenkron Programlama
• Fetch API ile Veri Alımı ve Gönderimi
• Fetch API ile JSON İşleme
• Hata Yönetimi (Error Handling)
• JavaScript Hata Türleri
• Özel Hata Nesneleri Oluşturma
• Web Storage API
• Service Workers ve PWA (Progressive Web Apps)
• GraphQL ile Veri İşleme
• TypeScript ile JavaScript Geliştirme
• Web Sockets ile Gerçek Zamanlı İletişim

JQuery

• JQuery Nedir? Neden Kullanılır?
• JQuery Kurulumu ve Kullanımı
• JQuery Seçiciler
• JQuery Olay Yönetimi
• JQuery Animasyonlar ve Efektler
• Ajax ve Dinamik içerik Yükleme
• Ajax Nedir ve Neden Kullanılır?
• JQuery AJAX Metotları
• Dinamik İçerik Yükleme
• JQuery UI Bileşenleri
• JQuery UI Temalar ve Özelleştirme
• Popüler jQuery Eklentileri
• JQuery ile Proje Geliştirme Örnekleri
• JQuery ile Performans Optimizasyonu
• JQuery ve SEO Optimizasyonu
• JQuery ile Form Yönetimi
• JQuery ile Grafik ve Görselleştirme
• JQuery ve JSONP ile Çapraz Domain İstekleri

“UI Tasarımda Responsive Design Konulu Workshop” – Cengiz Ceylan

Git

• Git ve Versiyon Kontrol Temelleri
• Git Kurulumu ve Yapılandırma
• Temel Git Komutları
• Depo (Repository) Yönetimi
• Gelişmiş Git Kullanımı
• Branch ve Merge İşlemleri
• GitHub ile Proje Yönetimi
• Git Workflow ve İş Akışları
• Çatışma (Conflict) Çözümü ve Geri Alma İşlemleri

React JS

• React Nedir? Neden Kullanılır?
• Kütüphaneleri ve Frameworklerin Karşılaştırılması
• React Kurulumu ve Yapılandırma
• Visual Studio Code ile React Geliştirme Ortamı Hazırlama
• React Komponentlerinin Temelleri
• JSX: JavaScript ve HTML Birleşimi
• React Bileşenleri ve Prop’ların Kullanımı
• Koşullu Render: Durumlara Göre İçerik Gösterme
• Liste Öğelerinin Render Edilmesi
• React Komponentlerinin Durum Yönetimi
• Uygulamalarınıza İnteraktivite Ekleme
• Komponent Hafızası ve Durum Yönetimi
• Render ve Commit Süreçleri
• Single Page Web Site Kodlaması ve Geliştirme

Angular JS

• Angular JS Nedir? Neden Kullanılır?
• Angular Kurulumu ve Yapılandırma
• Angular Bileşenler, Direktifler ve Filtreler
• Veri Bağlama ve Dependency Injection
• Router ve SPA Geliştirme
• Formlar ve Validasyon
• RxJS ve Reactive Programming
• Angular ile Proje Geliştirme Örnekleri

Kazanımlar

• Web Tasarım Temellerini Detaylı Öğrenip, Profesyonel Web Sitesi Geliştirirsiniz.
• Web Projesi Yönetim Araçlarını Öğrenirsiniz.
• UI ve UX Kavramlarının Web Tasarım ile Olan Bağını Öğrenirsiniz.
• Hazır Bir Prototipi Nasıl Koda Dökeceğinizi Öğrenirsiniz.
• Web’in Temeli HTML ve Stil Dökümanlarını Öğrenirsiniz.
• CSS ile İleri Seviye Stiller Yazabilirsiniz.
• Responsive Design Öğrenerek Desktop, Tablet ve Mobil Uyumlu Web Sayfaları Yapmayı Öğrenirsiniz.
• JavaScript ile İnteraktif Uygulamalar Geliştirebilirsiniz.
• Web Sitenizi HTML ile Yapabilir, CSS ile Görsel Stillerini Verebilir, JavaScript ile Dinamik Hale Getirebilirsiniz.
• SEO Uyumlu Kod Yazmayı ve Uygulamayı Öğrenirsiniz.
• Versiyon Kontrol Temellerini Öğrenirsiniz.
• Kalabalık Ekipler ile Uyum Halinde Çalışmayı Öğrenirsiniz.
• Popüler Front-end Yazılımlarını Uygulamalı Olarak Öğrenirsiniz.
• Web Tasarım Uygulamaları Yapabilir, Front-end Yazılım Geliştirme Alanında Çalışabilirsiniz.
• Mevcut Bir Web Sitesi Projesinin Kodunu Okuyabilir, Sayfaları Revize Edebilirsiniz.
• Front-end Geliştirme Teknolojilerine Hakim Olursunuz.
• Front-end ve Back-end Kavramlarını Öğrenir, 2 Disiplin Arasındaki Farkları Uygulamalarla Öğrenirsiniz.
• Web Tasarım Araçları ile Çalışabilir, Optimizasyonları Kullanabilirsiniz.
• React JS ve Angular JS ile 
• Popüler Yazılım Dillerinin Kullanımı ve Fonksiyonları Hakkında Fikir Sahibi Olursunuz.