Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
AI destekli tek HTML dosyası ile web uygulamaları geliştirme
3 students

AI destekli tek HTML dosyası ile web uygulamaları geliştirme

AI destekli tek dosya HTML yaklaşımıyla sıfırdan çalışan web uygulamaları üretmeyi öğrenin
Created byOkan Kaplan
Last updated 5/2026
Turkish

What you'll learn

  • AI kullanarak tek dosya HTML içinde çalışan uygulamalar tasarlayıp sıfırdan üretebileceksiniz.
  • Sadece HTML, CSS ve JavaScript ile harici bağımlılık olmadan güçlü web araçları geliştirebileceksiniz.
  • AI ile doğru şekilde iletişim kurarak fikirlerinizi çalışan projelere dönüştürmeyi öğreneceksiniz.
  • Web’in temel yapısını (HTML, CSS, JS) derinlemesine anlayarak kendi sistemlerinizi kurabileceksiniz.
  • State yönetimi, JSON ve localStorage kullanarak veri saklayan ve yönetebilen uygulamalar geliştirebileceksiniz.
  • Fetch API, Geolocation ve Speech API gibi teknolojilerle gerçek dünya verileriyle çalışan projeler yapabileceksiniz.
  • CDN ve kütüphane kullanımını öğrenerek doğru araçları doğru yerde kullanma becerisi kazanacaksınız.
  • Kod organizasyonu, modüler yapı ve performans teknikleri ile profesyonel seviyede temiz ve sürdürülebilir kod yazabileceksiniz.
  • UI framework mantığını anlayarak modern ve estetik arayüzler oluşturabileceksiniz.
  • İnternetsiz bile çalışabilen (offline) sistemler geliştirerek tam bağımsız web uygulamaları üretebileceksiniz.

Course content

18 sections • 140 lectures • 8h 28m total length

  • KURS HAKKINDA28:39

    Hazırsan bu sadece bir kurs değil, aynı zamanda zihnini yeniden inşa edecek bir üretim yolculuğudur: “AI ile Aha! HTML ile Her Şeyi Yaparsın: Sor, Öğren, Üret!” Bu yolculukta sıradan bir öğrenme deneyimi yaşamazsın çünkü burada her şey ezberden uzak, tamamen uygulama ve düşünme üzerine kuruludur; bir satır kodu sadece yazmazsın, onu neden yazdığını, ne işe yaradığını ve nasıl geliştirilebileceğini anlarsın. Her adımda kendine sorular sorarsın: “Bu yapı neyi çözüyor?”, “Bunu daha basit nasıl yaparım?”, “AI bana nasıl bir alternatif sunar?” ve bu sorular seni sıradan bir öğrenci olmaktan çıkarıp aktif bir üreticiye dönüştürür. HTML ile başlayan bu süreç aslında bir kapıdır; o kapıdan geçince web sayfaları, arayüzler, fikirler ve projeler üretmeye başlarsın ve zamanla gördüğün her şeyi “bunu ben nasıl yaparım?” gözüyle incelemeye başlarsın. En büyük fark burada ortaya çıkar: artık tüketen değil üreten bir zihne sahip olursun.

  • Tarayıcınızdaki Yapay Zeka Laboratuvarı: Fikirlerinizi Anında Gerçeğe Dönüştür3:25

    Tarayıcınızdaki Yapay Zeka Laboratuvarı: Fikirlerinizi Anında Gerçeğe Dönüştürün


    Açıklama: Karmaşık kurulumlara son! Tarayıcı tabanlı, AI destekli yeni nesil editörlerle tanışın. Tasarımdan koda, interaktif içeriklerden dinamik kullanıcı deneyimlerine kadar her şeyi tek bir panelde, yapay zekanın rehberliğiyle inşa edin. Dijital dünyada sadece bir tüketici değil, kendi araçlarını saniyeler içinde üreten yaratıcı bir mimar olun.

    Hashtagler: #YapayZeka #AI #Frontend #WebTasarım #DijitalÜretkenlik #NoCode #Yaratıcılık #TechTrends #WebDevelopment #GeleceğinTeknolojisi

  • ai den ide talebi3:38

    IDE – Teknik Talep Senaryosu

    1. Proje Amacı

    • Amaç: Kullanıcıların tarayıcı üzerinden HTML, CSS, JS düzenleyebileceği ve sonuçlarını canlı önizleme (live preview) ile görebileceği bir web IDE oluşturmak.

    • Özellikler:

    • HTML, CSS, JS için ayrı sekmeler.

    • FULL (birleştirilmiş) sekmesi ile tüm içerik senkronizasyonu.

    • Dosya import/export (HTML).

    • Mod geçişleri: Editör, Preview, Split.

    • Tab tuşu ile kod girme desteği.

    • Canlı önizleme iframe ile render edilmesi.

    2. Front-End Gereksinimleri

    2.1 Yapı

    • HTMLheader: Logo ve kontrol butonları (Import, Save, Edit, Split, View).

    • main: İki bölüm (editor-container ve preview-container)

    • editor-container: Sekmeler + textarea’lar

    • preview-container: Canlı önizleme iframe’i

    • CSSTemel renkler, gölge ve border stilleri, responsive tasarım.

    • Editor ve preview alanları esnek (flex) ve ekran boyutuna duyarlı.

    • Sekme aktif/pasif durumları, hover ve active animasyonları.

    • FontlarJetBrains Mono → kod editörü

    • Space Grotesk → UI

    2.2 İşlevler

    • Sekme YönetimiSekme değiştirildiğinde sadece ilgili textarea aktif olacak.

    • Sekme butonları görsel olarak aktif/pasif değişecek.

    • Mode Yönetimieditor → yalnızca editor görünür.

    • preview → yalnızca preview iframe görünür.

    • split → her ikisi yan yana görünür.

    • Textarea SenkronizasyonuHTML, CSS, JS → FULL textarea ile birleştirilir.

    • FULL textarea → ayrıştırılarak HTML, CSS, JS alanlarına ayrılır.

    • Canlı Önizlemeiframe içinde yazılan içerik render edilir.

    • Her değişiklik sonrası render tetiklenir.

    • Dosya İşlemleriImport → Kullanıcı seçtiği HTML dosyasını FULL editöre yükler ve ayrıştırır.

    • Export → FULL editör içeriğini HTML olarak indirme.

    3. JavaScript Fonksiyonları

    3.1 Senkronizasyon Fonksiyonları

    • updateFromParts()HTML, CSS, JS textarea içeriklerini FULL textarea’da birleştirir.

    • Birleştirilmiş içerik iframe içinde render edilir.

    • updateFromFull()FULL textarea içeriğini parse eder.

    • <body>, <style>, <script> tag’lerini ayırır.

    • Ayrıştırılmış içerikleri ilgili textarea’lara aktarır.

    • iframe render edilir.

    3.2 Event Listeners

    • input → değişiklik algılar ve senkronizasyon yapar.

    • keydown → Tab tuşu desteği:

    • Tab tuşu ile cursor aynı satırda tab ekleyebilme.

    • fileInput → import işlemleri için FileReader kullanılır.

    3.3 UI Fonksiyonları

    • switchTab(type)Aktif sekmeyi değiştirir.

    • İlgili textarea’yı gösterir.

    • setMode(mode)body class’ını değiştirerek mod geçişi yapar (mode-editor, mode-preview, mode-split).

    3.4 Dosya Fonksiyonları

    • exportFile()FULL editör içeriğini blob olarak oluşturur.

    • Tarayıcıda indirme başlatır (index.html).

    4. UI/UX Detayları

    • Buton hover ve active animasyonları (translate ve shadow değişimi).

    • Renk kodlamaları:

    • HTML → pembe

    • CSS → mavi

    • JS → yeşil

    • FULL → siyah

    • Preview alanında “Live Preview” etiketi.

    • Modlar arası geçiş (editor/split/preview) kullanıcı dostu.

    5. Teknik Gereksinimler

    • Tarayıcı Desteği: Modern tarayıcılar (Chrome, Edge, Firefox)

    • Responsive Tasarım: Ekran boyutuna göre editor ve preview alanları otomatik boyutlanmalı.

    • Performans: Büyük dosyalarda (500+ satır) render ve input gecikmesi minimum olmalı.

    • Güvenlik: iframe render edilirken dış script engellemesi kontrol edilebilir (sandbox attribute opsiyonel).

    6. Teslimat ve Test

    • HTML/CSS/JS tek dosya.

    • Örnek başlangıç içeriği:

    <h1>Merhaba Dünya!</h1>

    <p>Brutal IDE hazır.</p>



    • CSS başlangıç:

    body { background: #f0f0f0; padding: 20px; font-family: sans-serif; }

    h1 { color: #FF00F5; border: 4px solid #000; display: inline-block; padding: 10px; background: #fff; }



    • Test:

    • Sekme geçişleri sorunsuz.

    • Mod geçişleri sorunsuz.

    • Import/Export sorunsuz.

    • Canlı preview sorunsuz.

    7. Notlar

    • Kodlama standartları: ES6+, modular, anlaşılır değişken isimleri.

    • Editör performansını artırmak için debounce/raf kullanılabilir.

    • İleride eklenecek özellikler: temalar, otomatik kaydetme, sürüm geçmişi.

Requirements

  • Temel bilgisayar kullanımı (tarayıcı açma, dosya kaydetme gibi) dışında herhangi bir teknik bilgi gerekmez.
  • Daha önce HTML, CSS veya JavaScript bilmeniz zorunlu değildir — tüm temel kavramlar sıfırdan anlatılmaktadır.
  • Sadece bir internet tarayıcısı (Chrome, Edge vb.) ve basit bir metin editörü yeterlidir.
  • Öğrenmeye açık olmak ve deneme–yanılma sürecine istekli olmak en önemli gereksinimdir.
  • AI araçlarını kullanmaya hazır olmak (hesap açma ve temel kullanım düzeyinde) faydalı olacaktır, ancak kurs içinde yönlendirme yapılacaktır.

Description

AI ile HTML: Sor, Öğren, Üret – Tek Dosyada Güçlü Web Uygulamaları Geliştirme

Giriş: Yeni Nesil Web Geliştirme Yaklaşımı

Web geliştirme dünyası hızla değişiyor. Artık sadece kod yazmak yeterli değil. Doğru soruları sormak, sistem kurmak ve üretim odaklı düşünmek gerekiyor. Bu kurs, klasik eğitimlerden farklı olarak size sadece “nasıl kod yazılır”ı değil, aynı zamanda “nasıl üretim yapılır”ı öğretir.

Bu eğitimde, yapay zekayı bir araç değil bir iş ortağı olarak kullanmayı öğreneceksiniz. HTML, CSS ve JavaScript’in gücünü tek bir dosyada birleştirerek, bağımsız çalışan uygulamalar geliştireceksiniz. Hiçbir framework’e bağlı kalmadan, sıfırdan sistem kurma becerisi kazanacaksınız.

Bu kursun temel amacı, sizi bilgi tüketen biri olmaktan çıkarıp, kendi araçlarını üreten bir geliştirici haline getirmektir.

Bu Kursun Farkı Nedir?

Piyasadaki birçok kurs, belirli bir teknolojiye veya kütüphaneye bağımlı kalır. Bu da sizi o teknolojiye bağlı hale getirir. Bu kurs ise bağımsızlığı öğretir.

Burada öğreneceğiniz en önemli şeylerden biri şudur: Tarayıcı aslında bir laboratuvardır. Doğru kullanıldığında, kendi uygulamalarınızı geliştirebileceğiniz güçlü bir üretim ortamına dönüşür.

Bu kursta:

  • Tek dosya HTML yaklaşımıyla sistem kurmayı öğreneceksiniz

  • AI ile doğru iletişim kurarak proje üretmeyi deneyimleyeceksiniz

  • Hazır araçlar yerine kendi araçlarınızı geliştireceksiniz

  • Kodun mantığını yüzeysel değil derinlemesine anlayacaksınız

Bu yaklaşım, sizi sadece bir kullanıcı değil, bir üretici yapar.

Tarayıcı: Sizin Kendi Yazılım Fabrikanız

Çoğu kişi tarayıcıyı sadece web sitelerini görüntülemek için kullanır. Bu kurs, tarayıcıya bakış açınızı tamamen değiştirecek.

Tarayıcı içinde:

  • Arayüz oluşturabilirsiniz

  • Veri saklayabilirsiniz

  • Kullanıcı etkileşimlerini yönetebilirsiniz

  • API’lerle dış dünyaya bağlanabilirsiniz

Bu kurs boyunca, tarayıcıyı bir “yazılım fabrikası” olarak kullanmayı öğreneceksiniz. Her ders, bu fabrikanın farklı bir parçasını aktive eder.

Web’in Anatomisini Derinlemesine Öğrenin

Web teknolojileri üç temel yapıdan oluşur:

  • HTML: Yapı

  • CSS: Görünüm

  • JavaScript: Davranış

Bu kurs, bu üç teknolojiyi ayrı ayrı değil, birlikte nasıl çalıştıklarını anlayarak öğretir.

HTML ile sayfanın iskeletini kuracak, CSS ile görsel kimliğini oluşturacak ve JavaScript ile sayfaya hayat vereceksiniz.

Ancak burada amaç sadece öğrenmek değil. Amaç, bu bilgileri kullanarak gerçek çalışan sistemler üretmektir.

Dinamik Sistemler ve State Yönetimi

Modern uygulamaların en önemli özelliklerinden biri veri yönetimidir. Bu kurs, size sadece statik sayfalar değil, dinamik sistemler kurmayı öğretir.

Öğreneceğiniz konular arasında:

  • State kavramı

  • Veri saklama

  • Liste yönetimi

  • JSON yapıları

  • Veri temizleme ve güncelleme

Bu konular sayesinde, kullanıcıyla etkileşim kuran ve veri saklayan uygulamalar geliştirebileceksiniz.

Yapay Zeka ile Doğru İletişim Kurma

Yapay zeka kullanmak, sadece soru sormaktan ibaret değildir. Doğru soruyu sormak, doğru sonucu almanın temelidir.

Bu kursta:

  • AI’a nasıl proje anlatılır

  • İyi bir talep dokümanı nasıl yazılır

  • Büyük bir proje nasıl parçalara bölünür

  • AI çıktıları nasıl test edilir ve geliştirilir

gibi kritik becerileri öğreneceksiniz.

Amaç, AI’ı rastgele kullanan biri değil, onu yöneten bir geliştirici olmanızdır.

Web API’leri ile Gerçek Dünya ile Bağlantı

Modern web uygulamaları sadece ekranda çalışan yapılar değildir. Gerçek dünya ile bağlantı kurarlar.

Bu kursta öğreneceğiniz API’ler sayesinde:

  • Dış kaynaklardan veri çekebileceksiniz

  • Kullanıcının konumunu kullanabileceksiniz

  • Sesli komut sistemleri kurabileceksiniz

Bu bilgilerle, sadece basit uygulamalar değil, gerçek hayata dokunan projeler geliştireceksiniz.

Vanilla JavaScript ile Bağımsız Güç

Birçok geliştirici, kütüphanelere bağımlı hale gelir. Bu kurs, sizi bu bağımlılıktan kurtarmayı hedefler.

Vanilla JavaScript kullanarak:

  • Sıfırdan sistem kurmayı

  • Performanslı uygulamalar geliştirmeyi

  • Hafıza yönetimini

  • Offline çalışabilen sistemler oluşturmayı

öğreneceksiniz.

Bu yaklaşım, sizi daha güçlü ve esnek bir geliştirici yapar.

Kütüphaneler ve Doğru Kullanım Stratejisi

Bu kurs kütüphaneleri reddetmez. Aksine, doğru şekilde kullanmayı öğretir.

Şunları öğreneceksiniz:

  • Kütüphaneler ne zaman kullanılmalı

  • CDN nasıl çalışır

  • Bağımlılık yönetimi nasıl yapılır

  • Kütüphaneler projeye nasıl entegre edilir

Ama en önemlisi, bir kütüphaneye bağımlı kalmadan nasıl çalışacağınızı öğreneceksiniz.

Modern Arayüz Tasarımı

Kullanıcı deneyimi, bir uygulamanın başarısını doğrudan etkiler. Bu kursta, sade ama etkili arayüzler oluşturmayı öğreneceksiniz.

Öğreneceğiniz konular:

  • Grid sistemleri

  • Bileşen mantığı

  • Dark mode tasarımı

  • Kullanıcı dostu arayüzler

Bu bilgilerle, sadece çalışan değil, aynı zamanda iyi görünen uygulamalar geliştirebileceksiniz.

Kod Organizasyonu ve Modüler Yapı

Kod yazmak kadar, kodu düzenlemek de önemlidir.

Bu kursta:

  • Temiz kod yazımı

  • Modüler yapı kurma

  • Template kullanımı

  • Nesne odaklı düşünme

gibi konular ele alınır.

Bu sayede, büyüyebilen ve sürdürülebilir projeler geliştirebilirsiniz.

Proje Odaklı Öğrenme

Bu kurs tamamen uygulama odaklıdır. Öğrendiğiniz her bilgi, bir proje içinde kullanılır.

Kurs boyunca:

  • Küçük araçlar geliştireceksiniz

  • Gerçek problemleri çözen uygulamalar yapacaksınız

  • AI ile birlikte üretim yapacaksınız

Bu yaklaşım, öğrendiğiniz bilgilerin kalıcı olmasını sağlar.

Kimler Bu Kurstan En Fazla Faydalanır?

Bu kurs:

  • Sıfırdan başlamak isteyenler

  • Kendi projelerini geliştirmek isteyenler

  • AI ile üretim yapmak isteyenler

  • Web geliştirmeyi gerçekten anlamak isteyenler

için tasarlanmıştır.

Eğer sadece izlemek değil, üretmek istiyorsanız bu kurs sizin için uygundur.

Kursun Sonunda Neye Dönüşeceksiniz?

Bu kursu tamamladığınızda:

  • Kendi web uygulamalarınızı geliştirebileceksiniz

  • AI ile sistem kurabileceksiniz

  • Bağımsız çalışabilen projeler üretebileceksiniz

  • Problemleri analiz edip çözüm geliştirebileceksiniz

En önemlisi, bir fikri alıp çalışan bir ürüne dönüştürebilen biri haline geleceksiniz.

Sonuç: Öğrenmek Değil, Üretmek

Bu kursun amacı bilgi vermek değil, dönüşüm sağlamaktır.

Burada sadece kod yazmayı öğrenmezsiniz. Aynı zamanda:

  • Nasıl düşüneceğinizi

  • Nasıl sistem kuracağınızı

  • Nasıl üretim yapacağınızı

öğrenirsiniz.

Eğer hedefiniz sadece öğrenmek değil, üretmekse bu kurs sizin için doğru seçimdir.

Who this course is for:

  • Sıfırdan başlayıp kendi web uygulamalarını üretmek isteyenler
  • Kod yazmayı öğrenmek isteyen ama nereden başlayacağını bilemeyenler
  • AI kullanarak fikirlerini hızlıca çalışan projelere dönüştürmek isteyen girişimciler
  • Sadece HTML, CSS ve JavaScript ile bağımsız ve güçlü sistemler kurmak isteyen geliştiriciler
  • Hazır araçlara bağımlı kalmadan kendi araçlarını üretmek isteyenler
  • Frontend bilgilerini geliştirip gerçek projelerle pratiğe dökmek isteyenler
  • Tek dosya HTML mantığıyla taşınabilir, hızlı ve pratik çözümler üretmek isteyenler
  • Web teknolojilerini yüzeysel değil, mantığıyla ve sistematik olarak öğrenmek isteyenler
  • AI ile doğru iletişim kurarak daha verimli üretim yapmak isteyen herkes

Report abuse