Makale

Basit Bir Web Sitesini Bir Saatten Az Bir Sürede Kodlama

Aşağıdakileri içeren kişisel bir açılış sayfası:

2 dk okumaDil: TR TürkçeÜcretsiz0 alkış0 yorum

İşMarketing GrowthCodeWeb DevelopmentBusinessMarketing GrowthSimpleWebsite

Okuma seçenekleri

Ne İnşa Ediyoruz

Aşağıdakileri içeren kişisel bir açılış sayfası:

Bir başlık ve slogan
"Hakkımda" bölümü
Sosyal profillerinize bağlantılar
İletişim bilgileri
Bir iletişim formu (arka uç olmadan çalışır)

1. Adım: Projenizi Kurun (2 dakika)

İki dosyayla "web sitem" adında bir klasör oluşturun:

my-website/
├── index.html    (the structure)
└── style.css     (the styling)

Her iki dosyayı da herhangi bir metin düzenleyicide açın (VS Code, Notepad, TextEdit).

2. Adım: HTML'yi yazın (10 dakika)

HTML sayfanızın yapısıdır. Bunu bir binanın çerçevesi gibi düşünün.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name | Personal Website</title>
  <!-- Link to our CSS file -->
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>

  <!-- Header / Hero Section -->
  <header>
    <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
    <p class="tagline">Web Developer | Designer | Creator</p>
  </header>

  <!-- About Section -->
  <section id="about">
    <h2>About Me</h2>
    <p>
      Write a sentence or two about yourself. What do you do?
      What are you passionate about? Keep it friendly and authentic.
    </p>
  </section>

  <!-- Skills Section -->
  <section id="skills">
    <h2>What I Do</h2>
    <div class="skills-grid">
      <div class="skill-card">
        <i class="fas fa-code"></i>
        <h3>Web Development</h3>
        <p>HTML, CSS, JavaScript, React</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-paint-brush"></i>
        <h3>Design</h3>
        <p>UI/UX, Figma, Adobe XD</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-mobile-alt"></i>
        <h3>Responsive</h3>
        <p>Mobile-first, all devices</p>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <h2>Get In Touch</h2>
    <form id="contact-form">
      <input type="text" placeholder="Your Name" required>
      <input type="email" placeholder="Your Email" required>
      <textarea placeholder="Your Message" rows="5" required></textarea>
      <button type="submit">Send Message</button>
    </form>
    <p class="form-message" id="form-message"></p>
  </section>

  <!-- Footer -->
  <footer>
    <div class="social-links">
      <a href="#"><i class="fab fa-github"></i></a>
      <a href="#"><i class="fab fa-linkedin"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
    <p>&copy; 2026 Your Name. Made with <span class="heart">&hearts;</span></p>
  </footer>

  <script>
    // Contact form — no backend needed
    document.getElementById('contact-form').addEventListener('submit', function(e) {
      e.preventDefault();
      const message = document.getElementById('form-message');
      message.textContent = "Thanks! I will get back to you soon.";
      message.style.color = "#4CAF50";
      this.reset();
    });
  </script>
</body>
</html>

3. Adım: CSS'yi yazın (15 dakika)

CSS sayfanın güzel görünmesini sağlar. Renkler, düzen, aralık.

/* === Reset & Base === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f8f9fa;
}

/* === Header === */
header {
  text-align: center;
  padding: 80px 20px 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.highlight {
  color: #ffd700;
}

.tagline {
  font-size: 1.2em;
  opacity: 0.9;
}

/* === Sections === */
section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

h2 {
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

/* === Skills Grid === */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.skill-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.skill-card:hover {
  transform: translateY(-5px);
}

.skill-card i {
  font-size: 2em;
  color: #667eea;
  margin-bottom: 15px;
}

.skill-card h3 {
  margin-bottom: 10px;
}

/* === Form === */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

input, textarea, button {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

input:focus, textarea:focus {
  border-color: #667eea;
  outline: none;
}

button {
  background: #667eea;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

button:hover {
  background: #5a67d8;
}

.form-message {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

/* === Footer === */
footer {
  text-align: center;
  padding: 40px;
  background: #333;
  color: white;
}

.social-links a {
  color: white;
  font-size: 1.5em;
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.2s;
}

.social-links a:hover {
  color: #667eea;
}

.heart {
  color: #e74c3c;
}

/* === Responsive === */
@media (max-width: 600px) {
  header h1 { font-size: 1.8em; }
  header { padding: 60px 20px 30px; }
  section { padding: 40px 20px; }
}

Adım 4: Tarayıcıda açın (1 saniye)

'index.html'yi çift tıklayın. Tarayıcınızda açılır.

Artık çalışan bir web siteniz var.

5. Adım: Özelleştirin (10 dakika)

Kendinize ait hale getirmek için bunları değiştirin:

Metni değiştir — Adınız, kısa açıklamanız, biyografiniz
Renkleri değiştir — "Başlık"taki degradeyi ve mor "#667eea" rengini düzenleyin
Bağlantıları güncelleyin — Sosyal bağlantılardaki `#' işaretini gerçek URL'lerinizle değiştirin
Fotoğrafınızı ekleyin — Başlığın içine `' ekleyin
Formu düzenleyin — Gerçekten e-posta göndermek için form eylemini Formspree veya Web3Forms gibi bir hizmetle değiştirin

6. Adım: Yayınlayın (10 dakika)

Ücretsiz barındırma seçenekleri:

1. GitHub Sayfaları (Önerilen)

GitHub hesabı oluşturun
'username.github.io' adlı bir depo oluşturun
"index.html" ve "style.css" dosyalarınızı yükleyin
Siteniz "username.github.io" adresinde yayında

2. Netlify (En Kolay)

netlify.com'a gidin
Klasörünüzü sürükleyip bırakın
Bitti. Siteniz ücretsiz bir URL alır (random-name.netlify.app)

3.Versel

Vercel.com'a gidin
Projenizi içe aktarın
GitHub'dan otomatik dağıtımlar

Ne öğrendin

Bir saatten az bir sürede:

HTML yapısı (başlıklar, paragraflar, bölümler, formlar)
CSS stili (renkler, düzen, duyarlı tasarım)
JavaScript ile iletişim formu
Ücretsiz olarak çevrimiçi yayınlama

Sonraki Adımlar

Daha fazla sayfa ekleyin (Hakkında, Portföy, Blog)
Etkileşim eklemek için JavaScript öğrenin (animasyonlar, karanlık mod)
Daha hızlı şekillendirme için bir CSS çerçevesi (Tailwind, Bootstrap) kullanın
Gerçek bir iletişim formu arka ucu bağlayın
Özel bir alan adı satın alın (10-15$/yıl)

Yorumlar

0 yorum

Henüz onaylı yorum yok. Yeni yanıtlar moderasyon bekleyebilir.