Yeni Başlayanlar İçin Öneri:

JavaScript diline yeni başlayanlar için önerimiz: softyla.com sitemizdeki Katman 1 ile başlamanız, sonrasında Katman 2'ye geçerek daha sonra byteomi.com'a gelmenizdir. Böylece buradaki mimari ve ağır yapıya bir miktar alışmış ve konulara aşina olursunuz.

Hoş Geldiniz! Byteomi

Byteomi.com, modern web geliştirme teknolojilerini sade, anlaşılır ve uygulamalı bir yaklaşımla öğrenebileceğiniz kapsamlı bir eğitim platformudur.
HTML, CSS, JavaScript ve daha fazlası ile kodlama yolculuğunuza başlayın.

Kapsamlı İçerik
İnteraktif Örnekler
Pratik Bilgiler

Hızlı Erişim

Önemli Bilgilendirme

Bu sitede yer alan tüm içerikler, kod örnekleri ve teknik bilgiler özenle hazırlanmıştır.
Profesyonel projelerinizde kullanmadan önce kendi araştırmanızı yapmanız ve güncel dokümantasyonları incelemeniz önerilir.

AI Analizli Geliştirici Onaylı Ek Araştırma Önerilir

Web Geliştirme Öğrenme Platformu

Modern web teknolojilerini öğrenmek için kapsamlı ve interaktif bir platform. HTML, CSS, JavaScript ve daha fazlası.

49 Sayfa
4 Teknoloji
~200+ Kod Örneği
~50+ Saat İçerik
İnteraktif Örnekler Canlı kod editörleri
Detaylı Açıklamalar Kapsamlı içerik
Pratik Bilgiler Gerçek projeler için
Adım Adım Öğrenme Sıfırdan ileri seviye

Öğrenme Yolu Önerileri

HTML ile Başla

Temel yapıyı öğren

Web sayfalarının temel yapısını oluşturan HTML etiketlerini öğrenerek başlayın. Semantik yapılar ve form elementleri ile devam edin.

Bu yolda öğreneceksiniz:
  • HTML etiketleri ve yapısal elementler
  • Semantik HTML5 yapıları
  • Form elementleri ve validasyon
  • Multimedya içerik entegrasyonu
  • Erişilebilirlik (Accessibility) temelleri

CSS ile Devam Et

Görsel tasarımı keşfet

Önkoşul: HTML bilgisi gerekli

HTML yapısını stilize ederek modern ve responsive tasarımlar oluşturun. Flexbox, Grid ve animasyonlar ile tasarım becerilerinizi geliştirin.

Bu yolda öğreneceksiniz:
  • CSS selektörleri ve özellikleri
  • Flexbox ve Grid layout sistemleri
  • Responsive tasarım ve media queries
  • CSS animasyonları ve transitions
  • Modern CSS teknikleri (variables, calc, clamp)

JavaScript ile İlerle

Dinamik içerik oluştur

Önkoşul: HTML + CSS bilgisi gerekli

Web sayfalarınıza dinamik davranışlar ekleyin. Değişkenler, fonksiyonlar ve DOM manipülasyonu ile interaktif uygulamalar geliştirin.

Bu yolda öğreneceksiniz:
  • JavaScript temelleri (değişkenler, veri tipleri, operatörler)
  • Fonksiyonlar ve kapsam (scope)
  • DOM manipülasyonu ve event handling
  • ES6+ özellikleri (arrow functions, destructuring, modules)
  • Asenkron programlama (promises, async/await)

Frontend Developer Yolu

HTML → CSS → JavaScript

Tam kapsamlı frontend geliştirme yolculuğu. HTML temellerinden başlayarak modern JavaScript framework'lerine kadar tüm adımları öğrenin.

Bu yolda öğreneceksiniz:
  • HTML, CSS ve JavaScript temelleri
  • Responsive web tasarım teknikleri
  • Modern JavaScript ve ES6+ özellikleri
  • DOM manipülasyonu ve event handling
  • Frontend framework kullanımına hazırlık

Temel Web Tasarım Yolu

HTML + CSS odaklı

Web tasarımına odaklanan bir yol. HTML ve CSS ile modern, estetik ve kullanıcı dostu web sayfaları oluşturmayı öğrenin.

Bu yolda öğreneceksiniz:
  • HTML yapısal tasarım ve semantik
  • CSS ile görsel tasarım teknikleri
  • Layout sistemleri (Flexbox, Grid)
  • Renk teorisi ve tipografi
  • UI/UX temel prensipleri

Kodun Felsefesi ve Temelleri

script.js
function learnToCode() {
  const skills = ['HTML', 'CSS', 'JavaScript'];
  const dedication = 100;

  while (dedication > 0) {
    skills.forEach(skill => {
      console.log(`Learning ${skill}...`);
    });
    console.log('Building amazing things! 🚀');
  }
}

// Start your coding journey
learnToCode();
Kodlar Neden Renklidir?

Syntax highlighting (sözdizimi vurgulama), kodun okunabilirliğini artırmak için kullanılır. Farklı renkler, farklı kod elementlerini (değişkenler, fonksiyonlar, anahtar kelimeler) görsel olarak ayırt etmemize yardımcı olur. Bu, kodun yapısını hızlıca anlamamızı ve hataları daha kolay bulmamızı sağlar.

Neden İngilizce Kullanılır?

Programlama dilleri ve kodlama standartları evrenseldir. İngilizce, teknoloji dünyasının ortak dilidir. Bu sayede kodlar dünya çapında anlaşılabilir ve paylaşılabilir. Ayrıca, programlama dillerinin kendisi de İngilizce anahtar kelimeler kullanır (if, else, function, return vb.).

Matematik ile Yakınlığı Nedir?

Programlama, matematiksel mantık ve algoritmalar üzerine kuruludur. Değişkenler, fonksiyonlar, mantıksal operatörler ve algoritmalar matematiksel kavramlardan esinlenir. Ancak, matematik bilmek programlama için zorunlu değildir; mantıksal düşünme ve problem çözme yeteneği daha önemlidir.

Kodlar Neden Oluşur?

Kodlar, bilgisayara ne yapması gerektiğini söyleyen talimatlardır. Her kod satırı bir komuttur ve bilgisayar bu komutları sırayla çalıştırarak istenen sonucu üretir. Kodlar, karmaşık problemleri küçük, yönetilebilir parçalara bölerek çözmemize yardımcı olur.

Tema Nedir?

Kod editörlerindeki tema (theme), kodların görsel görünümünü belirler. Koyu temalar göz yorgunluğunu azaltır ve uzun süreli kodlama için idealdir. Açık temalar ise gündüz çalışmalarında tercih edilir. Tema seçimi kişisel tercih ve çalışma ortamına bağlıdır.

Programlama Dilleri Neden Farklıdır?

Her programlama dilinin kendine özgü amaçları ve kullanım alanları vardır. Örneğin, HTML web sayfalarının yapısını oluştururken, CSS görsel tasarımı, JavaScript ise dinamik davranışları sağlar. Bazı diller web geliştirme için, bazıları mobil uygulamalar için, bazıları ise veri analizi veya yapay zeka için optimize edilmiştir. Farklı diller, farklı problemleri çözmek için en uygun araçları sunar.

Sizin İçin Öneriler

HTML Geliştirin

Web sayfalarının temel yapısını oluşturan HTML etiketleri ve semantik yapıları öğrenin

CSS Uzmanlaşın

Modern CSS teknikleri, layout sistemleri ve responsive tasarım prensiplerini keşfedin

JavaScript Öğrenin

Dinamik web uygulamaları için JavaScript temelleri, DOM manipülasyonu ve modern ES6+ özellikleri

Algoritma Pratiği

Problem çözme becerilerinizi geliştirin, verimli algoritmalar tasarlayın ve veri yapılarını öğrenin

Bilgisayar ve Yazılım Temelleri

Bilgisayar Kavramı

Bilgisayar, veri işleme ve hesaplama yapabilen elektronik bir cihazdır. İlk bilgisayarlarda komutlar elektrik akımları ile veriliyordu. Günümüzde ise dijital sinyaller ve programlanabilir yazılımlar kullanılmaktadır. Modern bilgisayarlar, donanım (CPU, RAM, depolama) ve yazılımın birlikte çalışmasıyla karmaşık görevleri yerine getirebilir.

Elektrik Akımları Dijital Sinyaller Programlanabilir Donanım & Yazılım

Yazılım Nedir?

Yazılım, bilgisayarın çalışmasını sağlayan programlar ve verilerin toplamıdır. 1940'larda ortaya çıkmış, günümüzde web uygulamalarından mobil uygulamalara kadar geniş bir alanda kullanılmaktadır. Sistem yazılımları (işletim sistemleri) ve uygulama yazılımları (kullanıcı programları) olmak üzere iki ana kategoriye ayrılır.

1940'lar Programlar Veri İşleme Sistem & Uygulama

Frontend & Backend

Frontend: Kullanıcının gördüğü ve etkileşimde bulunduğu arayüz kısmıdır. HTML, CSS ve JavaScript ile geliştirilir. Tarayıcıda çalışır ve kullanıcı deneyimini şekillendirir. Backend: Sunucu tarafında çalışan, veri işleme ve iş mantığını yöneten kısımdır. Veritabanı işlemleri, API'ler ve sunucu yönetimi bu katmanda gerçekleşir.

Kullanıcı Arayüzü Sunucu Tarafı İş Mantığı Veritabanı

Tarayıcı ve Motor

Web tarayıcıları, internet üzerindeki web sayfalarını görüntülemek için kullanılan yazılımlardır. Her tarayıcının arkasında bir rendering engine (tarayıcı motoru) bulunur ve bu motor HTML, CSS, JavaScript kodlarını işleyerek görsel sayfalar oluşturur. Chrome (Blink), Firefox (Gecko), Safari (WebKit) gibi popüler tarayıcılar farklı motorlar kullanır.

Rendering Engine Web Sayfaları HTML/CSS/JS Blink/Gecko/WebKit

Visual Studio Code: Temel Kullanım Kılavuzu

1. VS Code'da Dosya ve Klasör Açma

Kod yazmaya başlamadan önce, projenizin bulunduğu klasörü veya tek bir dosyayı VS Code'da açmanız gerekir.

İşlem
Yöntem 1 (Menü)
Yöntem 2 (Kısayol)
Klasör Açma (Tavsiye Edilen)
Dosya (File) > Klasör Aç (Open Folder)
Klasör açmak için genel bir kısayol yoktur, ancak menüden erişim hızlıdır.
Tek Dosya Açma
Dosya (File) > Dosya Aç (Open File)
Ctrl + O (Windows/Linux) veya Cmd + O (macOS)
Yeni Dosya Oluşturma
Sol Gezgin (Explorer) panelinde klasör simgesinin yanındaki "Yeni Dosya" ikonuna tıklayın. Ctrl + N (Windows/Linux) veya
Cmd + N (macOS) ile yeni bir sekme açıp kaydedin.
İşlem
Yöntem 3 (Sürükle-Bırak)
Klasör Açma ( Tavsiye Edilen )
Proje klasörünüzü doğrudan VS Code penceresinin üzerine sürükleyip bırakın. Bu yöntem özellikle hızlı ve pratik bir çözümdür.
Tek Dosya Açma
Dosyayı doğrudan VS Code penceresinin üzerine sürükleyip bırakın. Bu yöntem tek bir dosyayı hızlıca açmak için idealdir.
Yeni Dosya Oluşturma
Sürükle-bırak yöntemi yeni dosya oluşturmak için uygun değildir. Bunun yerine Yöntem 1 veya Yöntem 2'yi kullanmanız önerilir.
💡 İpucu: Neden Klasör Açmalıyım? Projenizin tamamını (klasörünü) açmak, VS Code'un dosya yapısını görmesini, kod tamamlama özelliklerini ve proje genelindeki aramaları daha verimli kullanmasını sağlar.

2. Dosya Kaydetme ve Uzantı Kavramı

Yazdığınız kodun doğru bir şekilde çalışması ve VS Code'un o dilin özelliklerini tanıması için dosyayı doğru uzantıyla kaydetmek esastır.

İşlem
Kısayol
Açıklama
Kaydetme
Ctrl + S (Windows/Linux) veya
Cmd + S (macOS)
Çalıştığınız dosyayı kaydeder.
Tümünü Kaydetme
Ctrl + K ardından S (Windows/Linux) veya
Cmd + K ardından S (macOS) veya Dosya (File) > Tümünü Kaydet (Save All)
Birden fazla sekmede yaptığınız değişiklikleri topluca kaydeder. Tüm açık dosyaları tek seferde kaydetmek için kullanılır.

Dosya Uzantıları ve Anlamları:

Dosya adının sonundaki nokta işaretinden sonra gelen kısım (uzantı), VS Code'a ve işletim sistemine dosyanın ne tür bir içerik barındırdığını söyler:

Programlama Dili / Dosya Türü
Örnek Dosya Adı
Uzantı
Ne İşe Yarar?
HTML
index.html
.html
Web sayfasının temel yapısını oluşturur.
CSS
style.css
.css
Web sayfasının stil ve görünümünü belirler.
JavaScript
script.js
.js
Web sayfasına dinamik özellikler ekler.
Python
app.py
.py
Python kodlarını içerir.
Markdown
README.md
.md
Biçimlendirilmiş metin belgeleri oluşturur.

VS Code, doğru uzantıyı kullandığınızda otomatik olarak Syntax Highlighting (kod renklendirme) ve IntelliSense (akıllı kod tamamlama) özelliklerini devreye sokar.

3. Kod Çalıştırma (Çalıştırma Yolları)

VS Code bir kod düzenleyicisidir, doğrudan bir derleyici veya yorumlayıcı değildir. Kodu çalıştırma yöntemi, yazdığınız dile bağlıdır:

Kod Türü
Çalıştırma Yöntemi
Gerekli Uzantı/Araç (Örnek)
HTML/CSS/JS ( Frontend )
Tarayıcıda açılır. ( Sağ tık > Open with Live Server ) Live Server ( Önerilen Uzantı )
Python, Node.js ( Backend )
Dahili Terminalde çalıştırılır. Code Runner veya ilgili dilin
( Python/Node ) Uzantıları
Derlenen Diller ( C#, C++, Java )
Önce Derleme, sonra çalıştırma adımları izlenir. İlgili dilin Derleyici/SDK'sı ve Debug uzantıları

En kolay çalıştırma yöntemi: Özellikle tek dosyalık hızlı testler için, Code Runner gibi uzantılar kullanılarak dosyayı doğrudan VS Code'un dahili terminalinde çalıştırmak yaygın bir pratikdir.

4. Uzantılar (Extensions) Kavramı ve Önerilenler

VS Code'u bu kadar güçlü yapan, ihtiyaçlarınıza göre ekleyebileceğiniz binlerce uzantıdır. Uzantılar; yeni dil desteği, tema, hata ayıklama arayüzleri ve iş akışı araçları ekler.

Uzantı Ekleme Adımları:

  1. Sol paneldeki Kare Simgesine (Uzantılar) tıklayın.
  2. Arama çubuğuna uzantının adını yazın (Örnek: Live Server).
  3. Uzantıyı seçin ve Install (Yükle) butonuna tıklayın.

Sitenizin Ana Sayfası İçin Önerilen Temel Uzantılar:

Uzantı Adı
İşlevi
Neden Gerekli?
Live Server
Geliştirme aşamasındaki HTML/CSS/JS dosyalarınızı tarayıcıda canlı olarak görüntüler ve kaydettiğinizde otomatik yeniler. Frontend geliştiricileri için zaman kazandırır.
Prettier
Kodunuzu otomatik olarak belirli kurallara göre biçimlendirir. Ekip çalışmasında veya kişisel projelerde kod tutarlılığı sağlar.
Path Intellisense
Dosya yollarını yazarken akıllı tamamlama önerileri sunar. Dosya yollarını hatalı yazma riskini azaltır.
[Dil Uzantısı]
Python, ESLint, VS Code Icons gibi dile özel ek özellikler, hata denetimi veya arayüz geliştirmeleri sağlar. Çalıştığınız dile özel ek özellikler, hata denetimi veya arayüz geliştirmeleri sağlar.