Web Tasarım Kursu

Ünite 1: Web Teknolojileri ve İnternet Kavramları

Bu ünitede web’in temel bileşenleri, internet protokolleri ve sunucu-istemci mimarisi tanıtılır; web sayfalarının nasıl yayınlandığı ve erişildiği açıklanır.

• Web sitesi ve web sayfaları
• İnternet kavramları (HTTPS, FTP, WWW, domain, hosting…)
• Sunucu ve istemci kavramları

Ünite 2: Photoshop ile Web Arayüz Tasarımı

Bu bölümde Photoshop arayüzü, katmanlar, metin araçları ve maskeler ile web banner’ları ve sosyal medya görselleri tasarlayarak, web için optimize etmeyi öğreneceksiniz.

• Photoshop arayüzü tanıtımı
• Menüler ve araçlar
• Resim düzenleme işlemleri
• Katmanlar
• Metinler
• Düğme oluşturma ve kullanma
• Maske kavramı
• Web banner tasarımı
• Web’e ve Instagram’a görsel hazırlama
• Web sitesi arayüz tasarımı yapma
• Tasarımların web için optimize edilerek kaydedilmesi

Ünite 3: HTML ile Web Sayfası Yapma

HTML’in temel yapısı, semantik etiketler, responsive teknikler ve Web 3.0 kavramlarıyla modern, mobil uyumlu sayfalar oluşturmayı öğreneceksiniz.

• HTML temelleri
• Çok kullanılan HTML tag’leri
• HTML biçimlendirme
• Div yapısı, sınıflar ve kimlikler
• HTML ile JavaScript çalıştırma
• HTML link yapıları
• Listelerle çalışma
• Head, meta tag kavramları
• HTML ile multimedya çalışmaları
• HTML5 yenilikleri
• Web 3.0 teknolojisi ve semantik programlama
• Responsive tasarım tekniği
• Adaptive tasarım tekniği
• HTML’i mobil uyumlu kullanabilmek
• HTML5’te API ile çalışmalar yapmak

Ünite 4: CSS ile Web Tasarımı

CSS3 ile sayfa düzeni, tipografi, renk ve efektler; kutu modeli, 2D/3D animasyonlar ve Bootstrap kullanarak duyarlı tasarımlar geliştireceksiniz.

• CSS3 temelleri
• CSS kullanım yerleri
• Metinler ile çalışma ve tipografi
• CSS’de efektler ve renkler
• Çizgi ve kutu özellikleri
• Bitmap resimlerle çalışma
• 2D/3D animasyonlar
• CSS’de SEO kriterleri
• İleri CSS kullanımı
• Bootstrap kullanımı

Ünite 5: SCSS ile Web Tasarımı

SCSS ön işlemcisi ile değişkenler, iç içe kurallar, mixin’ler ve fonksiyonlar kullanarak daha modüler ve bakımı kolay stiller yazacaksınız.

• Sass giriş
• Sass kurulumu
• Değişkenler
• İç içe kurallar ve özellikleri
• @import, @mixin, @extend
• Fonksiyonlar
• Karakter dizileri
• Numeric, list, map
• Selector (seçiciler)
• Colors (renkler)

Ünite 6: JavaScript

JavaScript sözdizimi, veri tipleri, kontrol yapıları, OOP, asenkron programlama, JSON, AJAX ve MVC pattern ile etkileşimli web uygulamaları geliştireceksiniz.

• JavaScript temelleri (sözdizimi)
• Kodlama standartları
• Değişkenler ve veri türleri
• Operatörler
• Döngüler (for, do…while)
• Koşullu ifadeler (if/else)
• Diziler
• Nesne, özellikler ve yöntemler
• Metotlar
• OOP tekniği
• Olay tabanlı programlama
• Tarih ve saat işlemleri
• Asenkron programlama
• MVC design pattern
• JSON kullanımı
• AJAX teknolojisi
• Hata yönetimi

Ünite 7: React

React ile bileşen tabanlı mimari, JSX, state/props, router, AJAX entegrasyonu ve CSS/SCSS kullanarak modern SPA’lar inşa edeceksiniz.

• React giriş
• Kurulum, ES6, JSX
• React bileşenleri
• Class kavramı
• React events
• Liste ve form işlemleri
• React Router
• AJAX metodları
• CSS ve Sass entegrasyonu
• React projesi geliştirme

Ünite 8: Angular

Angular CLI, TypeScript, bileşenler, veri bağlama, servisler, dependency injection, routing ve form yapıları ile kurumsal düzeyde SPA’lar geliştireceksiniz.

• Angular temel bilgiler
• HTML5, CSS3 ve Bootstrap entegrasyonu
• JavaScript ES6+ ve TypeScript
• Angular CLI
• Bileşenler
• NgIf, NgFor, pipe mimarisi
• Event binding
• Alertifyjs implementasyonu
• Services ve DI
• Http, JSON-server ve Observable
• Routing
• Template-driven ve reactive formlar
• Authorize, localStorage ve guard kullanımı
• ASP.NET Core MVC ve Node.js backend projeleri

Ünite 9: MySQL

MySQL ile ilişkisel veritabanı oluşturma, tablo yönetimi, SQL sorguları, JOIN’ler ve güvenlik stratejileri öğrenerek veri depolama becerisi kazanacaksınız.

• MySQL’e giriş
• Tablo ve sütun kavramları
• Veritabanı haritası çıkarma
• Create, Drop işlemleri
• İlişki yönetimi
• Güvenlik (MD5, SHA1)
• SELECT, INSERT, UPDATE, DELETE
• İleri SQL sorgulama
• INNER, LEFT, RIGHT, CROSS, SELF JOIN

Ünite 10: NodeJS

Node.js ortamı, modüller, NPM, dosya sistemi, ORM’ler (Sequelize, Mongoose), Express.js ile backend API’ler ve proje uygulamaları geliştireceksiniz.

• Giriş ve kurulum
• Node.js modülleri ve dosya sistemi
• Live Server kurulumu
• NPM, e-posta, dosya yükleme
• MySQL işlemleri
• Sequelize ORM
• NoSQL ve Mongoose
• Express.js, Pug, MVC
• Authentication ve validation
• Proje uygulaması

Ünite 11: Web Sitesi Yayınlama ve Bakım

Domain/hosting işlemleri, sunucu yapılandırma, DNS/SSL ayarları, site taşıma, yönetim paneli kurulumu ve izin yönetimi konularını uygulamalı olarak göreceksiniz.

• Domain ve hosting işlemleri
• Sunucu yapılandırma
• Yayınlama hazırlıkları (DNS, SSL vb.)
• Siteyi sunucuya taşıma ve yayınlama
• Yönetim paneli kurulumu
• Yönetim paneli yapılandırması
• İzin yönetimi

Ünite 12: Arama Motorları Optimizasyonu (SEO)

SEO analizi, anahtar kelime stratejisi, içerik ve hedef kitle analizi, dizinleme algoritmaları, yapılandırılmış veri ve öne çıkan snippet teknikleri ile sitenizi üst sıralara taşıyacaksınız.

• Web sitesi analizi ve SEO sorunlarını tespit etme
• Anahtar kelime yer tespiti
• İçerik ve hedef kitle analizi
• Dizinleme algoritmaları
• Backlink ve DMOZ faktörleri
• Schema.org kullanımı
• Yapılandırılmış veri entegrasyonu
• Öne çıkan snippet gösterimi

Web Sitesi Nasıl Yapılır?

Bir web sitesi oluşturmak için izlenmesi gereken temel adımlar şunlardır:

• Web sitesi tasarımını Photoshop veya başka bir grafik programında hazırlayın.
• Hazırladığınız tasarımı HTML ile kodlayarak sayfa iskeletini oluşturun.
• CSS ile tasarımdaki tüm görsel öğeleri stilize edin ve responsive düzeni sağlayın.
• JavaScript ile etkileşim ve dinamik özellikler ekleyin.
• jQuery ile slider, takvim gibi etkileşimli bileşenler entegre edin.
• Veritabanı (ör. MySQL) oluşturup PHP veya başka bir backend diliyle siteye bağlayarak veri kaydını sağlayın.
• Domain ve hosting hizmeti satın alarak sitenizin yayın ortamını hazırlayın.
• Site dosyalarını ve veritabanını hosting sunucunuza yükleyip yapılandırın.

Web Sitesini Google'da Üst Sıralara Nasıl Çıkarırım?

Google’ın resmi SEO yönergelerini dikkatle inceleyip eksiksiz uygulayın. Anahtar kelime optimizasyonu, kaliteli içerik, mobil uyumluluk, hızlı yükleme süresi ve doğru yapılandırılmış veri kullanımı sitenizi üst sıralara taşır.

Web Sitesi Yapmak için Hangi Programları Kullanabilirim?

Aşağıdaki araçlar, web sitesi geliştirme sürecinizi kolaylaştırır:

• Photoshop (tasarım ve görsel hazırlık)
• Dreamweaver veya Notepad++ (HTML/CSS editörü)
• Visual Studio Code (tercihli kod editörü)
• Visual Studio (özellikle .NET tabanlı projeler için)