GauabGauab
tr
Makale

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

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
İşPazarlama BüyümesiCodeWeb 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:

  1. Metni değiştir — Adınız, kısa açıklamanız, biyografiniz
  2. Renkleri değiştir — "Başlık"taki degradeyi ve mor "#667eea" rengini düzenleyin
  3. Bağlantıları güncelleyin — Sosyal bağlantılardaki `#' işaretini gerçek URL'lerinizle değiştirin
  4. Fotoğrafınızı ekleyin — Başlığın içine `' ekleyin
  5. 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)

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

2. Netlify (En Kolay)

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

3.Versel

  1. Vercel.com'a gidin
  2. Projenizi içe aktarın
  3. 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)

Öne Çıkan Makaleler

İçedönükler İçin Topluluk Önünde Konuşma Sanatında Nasıl Ustalaşılır?
EditoryalTR
7 dkÜcretsiz

İçedönükler İçin Topluluk Önünde Konuşma Sanatında Nasıl Ustalaşılır?

Topluluk önünde konuşmak, insanların karşılaştığı en büyük korkulardan biri olarak gösteriliyor; bazı araştırmalarda ölümden daha üst sıralarda yer alıyor. İçedönükler için, insanlarla dolu bir odanın önünde durma ihtimali özellikle korkutucu gelebilir. İyi haber: İçedönükler genellikle olağanüstü konuşmacılardır. Doğal olarak izleyicilerinize karşı yansıtıcı, hazırlıklı ve empatiksiniz.

İşKariyer GelişimiBusinessCareerCareer Growth
0 alkış
Oku
Uygun Bütçeyle 10 Arka Bahçe Yükseltmesi: Kendin Yap Ev Tadilatı
EditoryalTR
8 dkÜcretsiz

Uygun Bütçeyle 10 Arka Bahçe Yükseltmesi: Kendin Yap Ev Tadilatı

Arka bahçeniz düşündüğünüzden daha fazla potansiyele sahip. Küçük bir dış mekan alanı bile rahatlatıcı bir sığınak, eğlence merkezi veya verimli bir bahçe haline gelebilir. Ve bunu gerçekleştirmek için binlerce dolara veya profesyonel yüklenicilere ihtiyacınız yok.

İşKişisel FinansPersonal FinanceSaving MoneyBusiness
0 alkış
Oku
Yalnız Seyahat Edenler İçin Bütçeye Uygun En İyi Seyahat Noktaları
EditoryalTR
8 dkÜcretsiz

Yalnız Seyahat Edenler İçin Bütçeye Uygun En İyi Seyahat Noktaları

Yalnız seyahat, yaşayabileceğiniz en dönüştürücü deneyimlerden biridir. Kendi programınızı belirliyorsunuz, anında kararlar alıyorsunuz ve bir arkadaşınızla seyahat ediyorsanız asla konuşamayacağınız insanlarla tanışıyorsunuz. Yaygın itiraz maliyettir; ancak doğru varış noktalarını seçtiğinizde yalnız seyahat aslında grup seyahatinden daha ucuz olabilir.

İşYaşam TarzıKişisel FinansPersonal FinanceSaving MoneyBusiness
0 alkış
Oku

Yorumlar

0 yorum

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