Web Development

Web Development, web siteleri ve web uygulamalarının tasarımı, geliştirilmesi ve bakımı sürecidir. Modern web development, kullanıcı deneyimini ön planda tutan, responsive ve performanslı web çözümleri üretmeyi hedefler.

HTML, web sayfalarının temel yapı taşıdır. Semantic (anlamsal) etiketler kullanarak içeriği organize eder ve web tarayıcılarına ne gösterileceğini söyler.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>İlk Web Sayfam</title>
</head>
<body>
    <h1>Merhaba Dünya</h1>
    <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

CSS, HTML elementlerinin görünümünü kontrol eden stil dilidir. Modern CSS ile responsive tasarımlar, animasyonlar ve karmaşık layoutlar oluşturabilirsiniz.

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Flexbox Layout */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #667eea, #764ba2);
}

CSS Grid vs Flexbox:

/* CSS Grid - 2D Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Flexbox - 1D Layout */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

JavaScript, web sayfalarına dinamik özellikler ve interaktiflik kazandıran programlama dilidir. Modern JavaScript (ES6+) ile güçlü web uygulamaları geliştirebilirsiniz.

// Modern JavaScript (ES6+)
const fetchData = async (url) => {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Hata:', error);
    }
};

// DOM Manipulation
const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    document.querySelector('.content').innerHTML = 'Tıklandı!';
});

Popular JavaScript Frameworks:

// React Component
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>Sayaç: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Artır
            </button>
        </div>
    );
}

Node.js, JavaScript'i sunucu tarafında çalıştırmaya olanak tanıyan runtime ortamıdır. V8 JavaScript engine üzerine kurulu olup, yüksek performanslı web sunucuları ve API'ler geliştirmenizi sağlar.

// Express.js ile basit web sunucusu
const express = require('express');
const app = express();

// Middleware
app.use(express.json());

// Routes
app.get('/', (req, res) => {
    res.json({ message: 'Merhaba Node.js!' });
});

app.post('/users', (req, res) => {
    const { name, email } = req.body;
    // Veritabanı işlemleri...
    res.status(201).json({ id: 1, name, email });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Sunucu ${PORT} portunda çalışıyor`);
});

NPM ve Package Management:

// package.json oluşturma
npm init -y

// Bağımlılık yükleme
npm install express mongoose bcryptjs jsonwebtoken

// Development bağımlılığı
npm install --save-dev nodemon jest

// Global paket yükleme
npm install -g pm2

Web development iki ana alana ayrılır: Frontend (kullanıcının gördüğü kısım) ve Backend (sunucu tarafındaki logic ve veri yönetimi).

Web development sürecinde kullanılan temel araçlar ve editörler üretkenliğinizi artıracak ve geliştirme deneyiminizi iyileştirecektir.

Code Editörleri:

Version Control:

# Git temel komutlar
git init
git add .
git commit -m "İlk commit"
git push origin main

# Branch işlemleri
git checkout -b feature/yeni-ozellik
git merge feature/yeni-ozellik

Build Tools ve Task Runners:

Geliştirdiğiniz web uygulamalarını canlıya almak için çeşitli hosting ve deployment seçenekleri mevcuttur.

// Heroku deployment için package.json script
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "engines": {
    "node": "16.x"
  }
}

Kaliteli ve sürdürülebilir web uygulamaları geliştirmek için takip etmeniz gereken en iyi uygulamalar: