Önemli Bilgilendirme
Kodun Felsefesi ve Temelleri
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();
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.
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.).
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, 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.
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.
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
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.
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.
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.
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.
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. |
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ı:
- Sol paneldeki Kare Simgesine (Uzantılar) tıklayın.
- Arama çubuğuna uzantının adını yazın (Örnek:
Live Server). - 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. |