Site Title

Web Geliştirme Masterclass

 

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Arial, sans-serif;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%),
url(‘https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1920&q=80’);
background-size: cover;
background-position: center;
background-attachment: fixed;
color: #fff;
min-height: 100vh;
}
.hero-section {
padding: 60px 40px 80px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.92) 0%, rgba(5, 150, 105, 0.92) 100%),
url(‘https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1920&q=80’);
background-size: cover;
background-position: center;
position: relative;
}
.container {
max-width: 1340px;
margin: 0 auto;
padding-right: 420px;
}
.course-content {
max-width: 900px;
}
h1 {
font-size: 42px;
margin-bottom: 20px;
line-height: 1.2;
color: #FCD34D;
font-weight: 700;
text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.course-subtitle {
font-size: 20px;
margin-bottom: 20px;
color: #ffffff;
opacity: 1;
line-height: 1.4;
text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.rating-number {
color: #ffd700;
font-weight: bold;
font-size: 18px;
}
.stars {
color: #ffd700;
font-size: 18px;
}
.rating span {
color: #fff;
}
.instructor {
font-size: 16px;
margin-bottom: 16px;
color: #fff;
}
.instructor a {
color: #FCD34D;
text-decoration: underline;
}
.course-stats {
display: flex;
gap: 24px;
font-size: 15px;
color: #fff;
}
.sidebar-card {
position: fixed;
top: 50%;
right: 40px;
transform: translateY(-50%);
width: 340px;
background: #fff;
padding: 36px 28px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
z-index: 100;
text-align: center;
}
.contact-title {
font-size: 26px;
font-weight: 700;
color: #1c1d1f;
margin-bottom: 14px;
}
.contact-subtitle {
font-size: 16px;
color: #6a6f73;
margin-bottom: 28px;
line-height: 1.5;
}
.whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
background: #25D366;
color: #fff;
text-decoration: none;
padding: 18px 24px;
font-size: 18px;
font-weight: 700;
border-radius: 10px;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.whatsapp-btn:hover {
background: #20BA5A;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}
.whatsapp-icon {
font-size: 28px;
}
.contact-info {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #e8e8e8;
font-size: 14px;
color: #6a6f73;
}
.content-section {
background: rgba(248, 249, 250, 0.95);
padding: 60px 40px;
}
.white-box {
background: #fff;
color: #1c1d1f;
padding: 40px;
border-radius: 8px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.white-box h2 {
margin-bottom: 20px;
font-size: 28px;
color: #1c1d1f;
}
.objectives {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.objective-item {
display: flex;
gap: 12px;
font-size: 15px;
}
.checkmark {
color: #10b981;
font-weight: bold;
font-size: 18px;
}
.curriculum {
background: #fff;
color: #1c1d1f;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.curriculum h2 {
margin-bottom: 12px;
font-size: 28px;
}
.curriculum-info {
margin-bottom: 28px;
font-size: 15px;
color: #6a6f73;
}
.section {
border: 1px solid #d1d7dc;
margin-bottom: 8px;
border-radius: 4px;
overflow: hidden;
}
.section-header {
background: #f7f9fa;
padding: 18px 24px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
transition: background 0.2s;
}
.section-header:hover {
background: #eef0f2;
}
.section-meta {
font-size: 14px;
color: #6a6f73;
font-weight: normal;
}
.section-content {
display: none;
}
.section.active .section-content {
display: block;
}
.lecture {
padding: 14px 24px;
border-top: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.lecture:hover {
background: #f8f9fa;
}
.lecture-title {
display: flex;
align-items: center;
gap: 12px;
}
.requirements {
background: #fff;
color: #1c1d1f;
padding: 40px;
border-radius: 8px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.requirements h2 {
margin-bottom: 20px;
font-size: 28px;
}
.requirements ul {
list-style: disc;
padding-left: 24px;
}
.requirements li {
margin-bottom: 12px;
font-size: 15px;
line-height: 1.6;
}
@media (max-width: 1024px) {
.container {
padding-right: 40px;
}
.sidebar-card {
position: static;
transform: none;
margin: 40px auto;
max-width: 400px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 32px;
}
.objectives {
grid-template-columns: 1fr;
}
.hero-section, .content-section {
padding: 40px 20px;
}
}

 

Web Geliştirme Masterclass: Sıfırdan İleri Seviye

HTML, CSS ve JavaScript ile sıfırdan profesyonel web siteleri geliştirmeyi öğrenin. Modern web teknolojileri ve responsive tasarım dahil 2025

4.9
★★★★★
(12.847 değerlendirme)
45.623 öğrenci
Oluşturan İhsan Talha Şimşek
📅 Son güncelleme: 11/2024
🌐 Türkçe
📝 Türkçe altyazılı
Eğitim Almak İster misiniz?
Kurslarımız hakkında detaylı bilgi almak ve kayıt olmak için bizimle iletişime geçin

💬
WhatsApp ile İletişime Geç

7/24 size yardımcı olmaya hazırız

Öğrenecekleriniz

✓
HTML5 ile semantik ve modern web sayfaları oluşturabileceksiniz
✓
CSS3 ile responsive ve mobil uyumlu tasarımlar yapabileceksiniz
✓
JavaScript ile interaktif ve dinamik web uygulamaları geliştirebileceksiniz
✓
Flexbox ve Grid ile modern layout sistemleri kullanabileceksiniz
✓
Bootstrap ve Tailwind CSS framework’lerini kullanabileceksiniz
✓
Git ve GitHub ile versiyon kontrolü yapabileceksiniz
✓
API entegrasyonu ve AJAX işlemlerini gerçekleştirebileceksiniz
✓
Profesyonel portföy web sitesi oluşturabileceksiniz

Kurs içeriği

16 bölüm • 192 ders • 48sa 30dk toplam uzunluk
▼ Web Geliştirmeye Giriş
10 ders • 1sa 20dk
▶
Web Geliştirme Dünyasına Hoş Geldiniz
08:15
▶
Geliştirme Ortamı Kurulumu
12:30
▶
VS Code ve Eklentiler
10:45
▶
İlk Web Sayfanızı Oluşturun
15:20
▶ HTML5 Temelleri
18 ders • 3sa 15dk
▶
HTML Yapısı ve Etiketler
18:40
▶ CSS3 ile Stil Verme
22 ders • 4sa 10dk
▶ Responsive Tasarım
16 ders • 3sa 25dk
▶ Flexbox Layout Sistemi
14 ders • 2sa 50dk
▶ CSS Grid Layout
15 ders • 3sa 05dk
▶ JavaScript Temelleri
20 ders • 4sa 20dk
▶ DOM Manipülasyonu
17 ders • 3sa 40dk
▶ ES6+ Modern JavaScript
19 ders • 3sa 55dk
▶ Bootstrap Framework
13 ders • 2sa 45dk
▶ Tailwind CSS
12 ders • 2sa 30dk
▶ Git ve GitHub
11 ders • 2sa 15dk
▶ API ve AJAX İşlemleri
15 ders • 3sa 30dk
▶ Web Performansı ve SEO
10 ders • 2sa 10dk
▶ Proje: E-Ticaret Web Sitesi
14 ders • 3sa 45dk
▶ Portföy ve İş Başvurusu
10 ders • 2sa 25dk

Gereksinimler

  • Temel bilgisayar kullanım bilgisi
  • Windows, Mac veya Linux işletim sistemli bir bilgisayar
  • İnternet bağlantısı
  • Hiçbir programlama deneyimi gerekmez, sıfırdan başlayabilirsiniz
  • Öğrenmeye ve pratik yapmaya istekli olmak

Açıklama

Modern Web Geliştirme Dünyasına Adım Atın!

Web geliştirmeyi sıfırdan öğrenin ve profesyonel web geliştiricisi olma yolunda ilk adımı atın.
Bu kapsamlı kurs, 48 saatlik video içeriği ve onlarca gerçek proje ile HTML, CSS ve JavaScript’in tüm inceliklerini öğretecek.

Neden Bu Kurs?

  • 💻 Web geliştirici kariyerine başlamak istiyorsanız
  • 🚀 Kendi web sitenizi oluşturmak istiyorsanız
  • 💼 Freelance web geliştirici olarak para kazanmak istiyorsanız
  • 🎯 Mevcut kariyerinize web geliştirme becerisi eklemek istiyorsanız
  • 📱 Responsive ve modern web siteleri yapmak istiyorsanız
  • 🌟 Profesyonel portföy oluşturmak istiyorsanız
  • 💡 Fikirlerinizi web üzerinde hayata geçirmek istiyorsanız
  • 🔧 Teknik becerilerinizi geliştirmek istiyorsanız

Kurs Boyunca Öğrenecekleriniz:

  • HTML5: Semantik etiketler, formlar, tablolar, medya elementleri
  • CSS3: Selectors, box model, positioning, animations
  • Responsive Tasarım: Media queries, mobile-first yaklaşım
  • Flexbox: Modern layout sistemi ve hizalama
  • CSS Grid: 2D layout sistemi ve karmaşık düzenler
  • JavaScript Temelleri: Variables, functions, arrays, objects
  • DOM Manipülasyonu: Element seçimi, event handling
  • ES6+: Arrow functions, promises, async/await
  • Bootstrap: Hızlı prototipleme ve component library
  • Tailwind CSS: Utility-first CSS framework
  • Git & GitHub: Versiyon kontrolü ve işbirliği
  • API Entegrasyonu: Fetch API, REST APIs
  • Web Performance: Optimizasyon teknikleri
  • SEO: Arama motoru optimizasyonu temelleri

Pratik Projeler:

  • 🏠 Kişisel portföy web sitesi
  • 📰 Blog platformu
  • 🛒 E-ticaret sitesi
  • 📋 To-do list uygulaması
  • 🌤️ Hava durumu uygulaması
  • 🎬 Film veritabanı
  • 💬 Chat uygulaması arayüzü
  • 🍔 Restoran web sitesi
  • 📊 Dashboard uygulaması
  • 🎮 Mini oyun projeleri

Kimler İçin Uygun?

  • 💻 Web geliştirme öğrenmek isteyen başlangıç seviyesi herkes
  • 🎓 Bilgisayar bilimleri öğrencileri
  • 💼 Kariyer değişikliği yapmak isteyen profesyoneller
  • 🚀 Girişimciler ve startup kurucuları
  • 🎨 Grafik tasarımcılar ve UI/UX tasarımcıları
  • 📱 Dijital pazarlama uzmanları
  • 🖥️ IT profesyonelleri
  • 🎯 Freelance çalışmak isteyenler
  • 🌐 Kendi web sitesini yapmak isteyenler

Kurs Sonunda Kazanımlarınız:

  • ✅ Sıfırdan profesyonel web siteleri geliştirebileceksiniz
  • ✅ Responsive ve mobil uyumlu tasarımlar yapabileceksiniz
  • ✅ JavaScript ile interaktif uygulamalar oluşturabileceksiniz
  • ✅ Modern CSS framework’lerini kullanabileceksiniz
  • ✅ Git ve GitHub ile proje yönetimi yapabileceksiniz
  • ✅ API entegrasyonları gerçekleştirebileceksiniz
  • ✅ Web performansını optimize edebileceksiniz
  • ✅ Profesyonel portföye sahip olacaksınız
  • ✅ Freelance iş alabilecek seviyeye geleceksiniz
  • ✅ Web geliştirme sektöründe iş bulabileceksiniz

Bonus İçerikler:

  • 📦 100+ hazır kod parçacığı (snippets)
  • 🎨 Modern web sitesi şablonları
  • 🔧 VS Code eklentileri listesi
  • 📚 Ücretsiz kaynak ve araçlar rehberi
  • 💡 Cheat sheet’ler (HTML, CSS, JavaScript)
  • 🎯 Portföy hazırlama rehberi
  • 💼 Freelance iş bulma stratejileri
  • 📝 Mülakat soruları ve cevapları
  • 🌐 Web hosting ve domain rehberi