1. Kodlama Ortamı: Visual Studio Code (VS Code)

Web geliştirmeye başlamanın ilk adımı iyi bir kod düzenleyicisi kullanmaktır. VS Code, ücretsiz ve güçlü bir editördür.

Kurulum:

 

2. Hızlı Başlangıç: HTML ve CSS Temelleri

Bir web sitesi yapmak için öncelikle HTML ve CSS öğrenmelisiniz. İşte basit bir şablon:

index.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Sitem</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Hoş Geldiniz</h1>
    </header>
    <p>Bu benim ilk web sitem!</p>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 20px;
}

 

3. Ücretsiz Hosting: GitHub Pages

Oluşturduğunuz siteyi internette yayınlamak için GitHub Pages kullanabilirsiniz.

Adımlar:

  • GitHub hesabı oluşturun.
  • Yeni bir repo oluşturun.
  • index.html ve styles.css dosyalarınızı yükleyin.
  • Settings > Pages bölümüne gidin ve main branch'ini seçerek yayına alın.

 

4. Görseller ve İkonlar: Ücretsiz Kaynaklar

Görseller web sitenize profesyonel bir görünüm kazandırır. İşte bazı ücretsiz kaynaklar:

 

5. Responsive Tasarım: Mobil Uyumlu Web Siteleri

Web sitenizin mobil cihazlara uyumlu olmasını sağlamak için CSS Media Queries kullanabilirsiniz:

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

Bu kod sayesinde 768 pikselden küçük ekranlarda arka plan rengi değişecektir.

 

Sonuç

Bu ücretsiz araçları kullanarak HTML ve CSS ile profesyonel görünümlü bir web sitesi yapabilirsiniz. Daha fazlasını öğrenmek için online eğitim platformlarını da değerlendirebilirsiniz:

Şimdi sizde kendi projenizi oluşturmaya başlayın ve web geliştirme dünyasındaki yolculuğunuza ilk adımınızı atmış olun!