Most of us on the WPBeginner team can remember staring at our first blank code editor, completely overwhelmed by all the HTML tags, CSS properties, and JavaScript functions we needed to learn.
Ancak bu uzun zaman önceydi ve o zamandan beri binlerce yeni başlayan kişinin aynı boş ekranı güzel, işlevsel web sitelerine dönüştürmesine yardımcı olduk.
Öğrendiklerimiz şunlar: kodlama sadece "teknoloji insanları" için değildir. Doğru yaklaşımla ve rehberlikle herkes sıfırdan bir web sitesi oluşturmayı öğrenebilir. Öğretim yöntemimizi işletme sahiplerinden sanatçılara kadar her kesimden öğrenciyle test ettik ve iyileştirdik.
Bu başlangıç dostu kılavuzda, daha önce sayısız kez işe yaramış aynı kanıtlanmış yöntemi kullanarak ilk web sitenizi kodlama sürecinin tamamında size rehberlik edeceğiz. Teknik altyapı gerekmez - sadece öğrenme isteğinizi getirin.

Web Sitesi Oluşturucuları vs. Sıfırdan Web Sitesi Kodlama
İnternetin ilk günlerinde, bir web sitesi oluşturmak, tüm kodu sıfırdan yazmak anlamına geliyordu. Yavaştı ve ciddi kodlama becerileri gerektiriyordu.
Today, that’s no longer the case. Around 62.9% of websites now use frameworks and tools that eliminate the need for manual coding.
Çoğu insan, web sitelerini daha hızlı ve daha kolay oluşturmak için WordPress veya diğer içerik yönetim sistemleri gibi platformları kullanır.
WPBeginner'da WordPress ve SeedProd gibi kodsuz araçlara güveniyoruz. Özelleştirilebilir, verimli ve yeni başlayan dostudurlar.
Vakaların yaklaşık %95'inde, web sitesi oluşturucu veya kodsuz bir çözüm kullanarak profesyonel bir site oluşturabilirsiniz - programlama gerekmez.
Bir Web Sitesi Oluşturucu Kullanmanın Artıları ve Eksileri
Artıları
- Basit ve yeni başlayan dostu.
- Web geliştirme öğrenmenize gerek yok.
- İşinize odaklanabilmeniz için zamandan tasarruf sağlar.
- E-ticaret, üyelik ve küçük işletme web siteleri için harika.
Eksiler
- Sitenizi yavaşlatan şişirilmiş özellikler içerebilir.
- Basit siteler bile güncelleme ve yedekleme gerektirir.
Sıfırdan Kod Yazmanın Artıları ve Eksileri
Kendi kodunuzu yazmayı düşünüyorsanız (manuel olarak veya ChatGPT veya Gemini gibi bir yapay zeka aracının yardımıyla), bunun artılarını ve eksilerini incelemeye değer.
Artıları
- ChatGPT gibi yapay zeka araçları, temel HTML, CSS ve JavaScript kodlamasını hızlandırabilir.
- Web sitenizin nasıl çalıştığı ve göründüğü üzerinde tam kontrole sahip olursunuz.
- Minimal kod, daha hızlı yükleme süreleri ve daha az harici bağımlılık anlamına gelir.
- Kodlama becerilerinizi geliştirmenin ve kariyer fırsatlarını açmanın harika bir yolu.
Eksiler
- Yapay zeka ile bile, sitenizi hata ayıklamak veya güncellemek için ürettiği kodu anlamanız gerekir.
- Dinamik özellikler arka uç kodlama bilgisi (PHP veya Python gibi) gerektirir.
- Daha sonra değişiklik yapmak, hataya açık olabilen ham kod dosyalarını düzenlemek anlamına gelir.
- SEO araçlarını veya üçüncü taraf hizmetleri entegre etmek daha zor.
- Git gibi araçlar olmadan erişimi paylaşmak veya işbirliği yapmak daha zordur.
- Karmaşık özellikler için bir geliştirici kiralamak pahalı olabilir.
İpucu: Bunu, web sitesi oluşturucuları ve manuel kodlama hakkındaki tam kılavuzumuzda daha ayrıntılı olarak ele aldık.
Zamanınız kısıtlıysa, sizin için kodu oluşturan araçlarla başlamanızı öneririz, örneğin WordPress veya Wix. Yöntem 1 ve 2'de bunları ele alıyoruz.
Programlamayı tam olarak öğrenmek istiyorsanız, 3. ve 4. Yöntemler size sıfırdan bir site oluşturmayı gösterir, bu da öğrenciler ve meraklı öğrenciler için harika bir seçenektir.
Başlamaya hazır mısınız? Denemek istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanın.
- WordPress ile Özel Bir Web Sitesi Kodlayın
- Wix Website Builder ile Bir Web Sitesi Kodlayın
- Yapay Zeka Kullanarak Sıfırdan Bir Web Sitesini Kodlamayı Öğrenin
- Bir Web Sitesini Sıfırdan Kodlamayı Öğrenin
- Bir Web Sitesini Kodlamanın En İyi Yolu Hangisidir?
1. WordPress ile Özel Bir Web Sitesi Kodlayın
WordPress en popüler web sitesi oluşturma platformudur. Hatta CMS pazar payı raporumuza göre, WordPress internetteki tüm web sitelerinin %43'ünden fazlasını desteklemektedir.
We use WordPress for all our websites, and our in-depth WordPress review discusses its pros and cons in more detail.
WordPress kutudan çıktığı haliyle zaten pek çok özelliğe sahip, ancak daha da iyisi var: eklenti adı verilen eklentiler yükleyebilirsiniz. Bunlar, WordPress'e ek işlevsellik katan yazılım parçalarıdır ve yalnızca WordPress.org deposunda, kodsuz sayfa oluşturucular da dahil olmak üzere 59.000'den fazla bulabilirsiniz.
Sayfa oluşturucular söz konusu olduğunda, SeedProd bizim en iyi seçimimizdir. Ortak web sitelerimizin çoğunu tasarlamak için kullandığımız popüler bir sürükle ve bırak WordPress sayfa oluşturucudur. Hatta SeedProd web sitesini SeedProd kullanarak oluşturduk!

Daha fazla bilgi için detaylı SeedProd incelememize göz atın.
WordPress + SeedProd Kullanmanın Artıları
- Başlangıç dostu kurulum: Bluehost gibi barındırma sağlayıcıları tek tıklamayla WordPress kurulumu sunar ve SeedProd, tasarımı sürükle ve bırak kadar basitleştirir.
- Tam sahiplik ve kontrol: Kapalı platformlarda sizi sistemlerine kilitleyen bazı platformların aksine, sitenizin ve verilerinizin sahibi sizsiniz.
- Büyüme esnekliği: Basit başlayın ve daha sonra eklentiler kullanarak e-ticaret, üyelikler veya özel özelliklerle genişletin.
- Devasa bir ekosisteme erişim: 59.000'den fazla eklenti ve sayısız tema ile kodlama gerektirmeden her şeyi özelleştirebilirsiniz.
Göz Önünde Bulundurulması Gereken Eksiler
- Kendi barındırma hizmetinizi yönetmeniz gerekecek, bu da eklenti güncellemeleri ve yedeklemelerle ayak uydurmak anlamına gelir (birçok barındırma hizmeti bu konuda yardımcı olsa da).
- Başlangıçta küçük bir öğrenme eğrisi var, ancak tamamen yapılabilir ve size rehberlik etmek için buradayız.
WordPress'e başlamak için bir alan adına ve web barındırmaya ihtiyacınız olacak. Bluehost kullanmanızı öneririz. Onlar en iyi WordPress barındırma sağlayıcılarından biridir ve okuyucularımıza ücretsiz bir alan adı ve barındırma için büyük bir indirim (sadece ayda 2,99 $) sunuyorlar.
Alternatiflere bakmak isterseniz, Hostinger, SiteGround veya diğer en iyi WordPress barındırma şirketlerinden birini öneririz.
Alan adınız ve barındırma hizmetiniz olduktan sonraki adım, WordPress'i (doğru şekilde) kurmaktır.
Harika haber şu ki, Bluehost gibi çoğu iyi web barındırma şirketi, tek tıklamayla kurulum süreciyle WordPress'i kurmayı çok kolaylaştırıyor. Gerçekten kullanıcı dostu, bu yüzden başlamak için ekrandaki talimatları izleyebilirsiniz.
WordPress'i kurduktan sonra yönetici paneline giriş yapabilirsiniz. Şuna benzer görünecektir:

Artık tek satır kod yazmanıza gerek kalmadan web sitenizi harika gösterecek şeylerden bahsedelim. Başlamak için SeedProd eklentisini yükleyip etkinleştirmeniz gerekecek. Ayrıntılar için WordPress eklentisi yükleme hakkındaki eğitimimize bakın: WordPress eklentisi yükleme.
SeedProd, kodlama gerektirmeden sadece sürükleyip bırakarak kendi web sitenizi kolayca tasarlamanıza ve güzel sayfalar oluşturmanıza olanak tanır, bu da bu eğitim için mükemmeldir.
Kendi özel WordPress temanızı sıfırdan oluşturmak için de kullanabilirsiniz. Bu, kullanıcıların sitenizi ziyaret ettiklerinde görecekleri web sitenizin ön yüzü olacaktır.
Ayrıca, SeedProd'da size 60 saniyeden kısa sürede özel bir tema oluşturan bir yapay zeka oluşturucu bile bulunur. Ayrıntılar için, yapay zeka ile WordPress web sitesi nasıl yapılır hakkındaki rehberimize bakın.
SeedProd'u yükledikten sonra, SeedProd » Açılış Sayfaları sayfasına gidin ve ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklayın.

Bir sonraki ekranda bir şablon seçmeniz istenecektir.
SeedProd, size bir başlangıç yapmanız için güzel tasarlanmış şablonlarla doludur. Bunlar, kar amacı gütmeyen kuruluş web siteleri veya otomotiv işletme siteleri gibi belirli kullanım durumları için şablonları içerir.
Veya boş bir sayfayla başlamak için 'Boş Şablon'u seçebilirsiniz.

Bundan sonra, sayfanız için bir başlık ve bir URL takma adı girmeniz istenecektir.
Örneğin, web sitenizin ana sayfasını oluştururken, hem başlık hem de URL (o belirli sayfanın web adresi) olarak 'Ana Sayfa' girebilirsiniz.

Ardından, 'Kaydet ve Sayfayı Düzenlemeye Başla' düğmesine tıklamanız gerekir.
SeedProd şimdi sayfa oluşturucu arayüzünü yükleyecektir. Düzenlemeye başlamak için basitçe tıklayıp sürükleyebileceğiniz sezgisel bir sayfa oluşturucudur.

SeedProd'un sürükle ve bırak arayüzü hem yeni başlayanlar için kullanıcı dostu hem de deneyimli geliştiriciler için yeterince güçlüdür.
Sol tarafta, tüm yaygın web tasarım öğelerini bloklar halinde göreceksiniz. Bunları sayfanıza sürükleyip bırakabileceğiniz yapı taşları olarak düşünebilirsiniz.
Sağ tarafınızda, tasarımınızın canlı bir önizlemesini göreceksiniz. Düzenlemek, silmek veya taşımak için herhangi bir öğeye basitçe dokunup tıklayabilirsiniz.
İlham mı arıyorsunuz veya sadece web sitenizi hızlıca mı oluşturmak istiyorsunuz? SeedProd, başlıklar, alt yazılar ve harekete geçirici mesajlar dahil olmak üzere metinleri kolayca oluşturabilen güçlü yapay zeka özelliklerine sahiptir.
Tasarımınıza bir Metin bloğu ekleyin ve ‘Yapay Zeka Metni Oluştur’ düğmesine tıklayın. Kullanmak istediğiniz komutu yazın ve ‘Metin Oluştur’ düğmesine basın. SeedProd daha sonra talimatlarınıza göre bir metin oluşturacaktır.

Canva gibi web tasarım yazılımlarını kullanmak zorunda kalmadan benzersiz görseller ve grafikler oluşturmak ister misiniz?
SeedProd integrates with DALL-E so you can generate original images in seconds and then add them to your site with a single click.

Temel olarak, kod yazmadan gezinme menüsü, kenar çubukları ve altbilgiler dahil olmak üzere özel bir web tasarımı oluşturabilirsiniz.
Şimdi, özel kod eklemeniz gerekirse, SeedProd bu konuda da size yardımcı oluyor. Sadece ‘Özel HTML’ bloğunu sayfanıza sürükleyip bırakın.

Bu bloğun içine, ihtiyacınız olan herhangi bir HTML kodunu manuel olarak ekleyebilirsiniz.
Özel HTML bloğunuzun kenar boşluğunu, dolgusunu ve tasarım özniteliklerini de ayarlayabilirsiniz.

Benzer şekilde, sayfanıza özel CSS kodu da ekleyebilirsiniz.
Sol alt köşedeki 'Ayarlar' düğmesine tıklayın ve 'Özel CSS' seçeneğini belirleyin.

Sayfanızı düzenlemeyi bitirdikten sonra, yayına almak için 'Kaydet ve Yayınla' düğmesine tıklayın.
Sayfanızı canlı olarak görüntülemek için 'Önizleme' düğmesine de tıklayabilirsiniz.

Web siteniz için diğer sayfaları oluşturmak üzere işlemi tekrarlayın. Kelimenin tam anlamıyla dakikalar içinde tek sayfalık bir web sitesi veya hatta tüm küçük işletme web sitesi oluşturabilirsiniz.
SeedProd'un güzelliği, bir web sitesi oluşturmayı ve düzenlemeyi inanılmaz derecede kolaylaştırmasıdır.
İşte bu yüzden dünya çapında birçok profesyonel geliştirici bunu kullanıyor. Hatta Awesome Motive gibi büyük şirketlerdeki geliştiriciler bile ana web sitelerini oluşturmak için SeedProd'a güveniyor çünkü çok hızlı ve özelleştirilebilir.
SeedProd Alternatifleri
SeedProd kullanmak istemiyor musunuz? Sizi anladık! İşte kullanabileceğiniz diğer WordPress sayfa oluşturucuları için en iyi seçimlerimizden bazıları:
- Thrive Architect – Bu, dönüşüm elde etmeye gerçekten odaklanmış harika bir sayfa oluşturucudur. Hızlı başlamanız için 357'den fazla önceden tasarlanmış düzen ile birlikte gelir.
- Divi Builder – Hem tema hem de sayfa oluşturucu olarak çalışan başka bir güçlü sürükle-bırak oluşturucu. Size bolca esneklik sunar.
- Beaver Builder – Bu, birçok kişinin sevdiği, iyi bilinen ve güvenilir bir başka WordPress sayfa oluşturucudur.
- Astra – Bir tema arıyorsanız, Astra son derece özelleştirilebilir ve tek bir tıklamayla kurabileceğiniz hazır başlangıç web siteleriyle birlikte gelir. Gerçek bir zaman kazandırıcı!
WordPress'e biraz önyargılı olsak da (sonuçta biz WPBeginner'ız!), popülerliği gerçekten de kendi adına konuşuyor. BBC, Microsoft, Facebook ve The New York Times gibi birçok büyük isim WordPress kullanıyor. Yani iyi bir şirkette olduğunuzu biliyorsunuz!
İpucu: WordPress kurulumu konusunda yardıma mı ihtiyacınız var? Uzman ekibimiz size ücretsiz WordPress blog kurulumu konusunda yardımcı olabilir.
2. Wix Web Sitesi Oluşturucu ile Bir Web Sitesi Kodlayın

Wix, tek bir satır kod yazmadan bir web sitesi oluşturmanıza olanak tanıyan, yeni başlayan dostu bir web sitesi oluşturucusudur. Barındırma, alan adları veya WordPress kurulumu ile uğraşmaya hazır değilseniz, Wix başlamak için iyi bir yer olabilir.
Yüzlerce profesyonelce tasarlanmış şablon arasından seçim yapabilir ve basit sürükle-bırak araçlarını kullanarak her şeyi özelleştirebilirsiniz. Ayrıca web sitesi metni yazmanıza, düzenler oluşturmanıza ve bölümleri hızlı bir şekilde tasarlamanıza yardımcı olabilecek yerleşik yapay zeka araçlarına sahiptir.

Wix, resim galerileri, video blokları, iletişim formları, blog bölümleri ve hatta çevrimiçi satış yapmak istiyorsanız temel e-ticaret araçları gibi kullanışlı özellikler içerir.
Yazılım güncellemeleri, yedeklemeler ve güvenlik gibi tüm teknik konular sizin için halledilir. Ayrıca, takıldığınızda destek ekibi 7/24 hizmetinizdedir.

Pros of Using Wix
- Wix'in kullanımı çok kolaydır - sadece sürükleyin, bırakın ve düzenleyin.
- Dahili barındırma ve ücretsiz şablonlarla birlikte gelir.
- Yapay zeka tasarım araçları, bir siteyi daha da hızlı oluşturmanıza yardımcı olabilir.
- Güvenlik ve yedeklemeler dahil hepsi bir arada çözüm.
- Küçük işletme sahipleri, yaratıcılar ve kişisel web siteleri için harika.
Wix Kullanmanın Dezavantajları
- WordPress.org gibi açık platformlara kıyasla daha az esneklik.
- Bazı şablonlar ve özellikler daha yüksek fiyatlandırma katmanlarının arkasında kilitlidir.
- Wix'ten WordPress'e geçmek isterseniz, taşıma işlemi karmaşık olabilir ve sitenizi manuel olarak yeniden oluşturmanız gerekebilir.
Wix'e Alternatifler
Seçebileceğiniz pek çok başka kolay web sitesi oluşturucu var.
İşte size birkaç başlangıç dostu seçenek daha:
- Gator by HostGator – Sürükle ve bırak özelliklerine sahip barındırılan oluşturucu.
- HubSpot – Web sitesi oluşturmayı güçlü pazarlama araçlarıyla birleştirir.
- BigCommerce – Çevrimiçi mağazalar için tamamen barındırılan bir çözümdür.
Hâlâ emin değil misiniz? Daha fazla kontrol, esneklik ve büyüme alanı sunan seçeneği görmek için Wix ve WordPress karşılaştırmamıza göz atın.
Ve en iyi seçimlerimizi arıyorsanız, işte her biri için artılarını ve eksilerini karşılaştıran en iyi web sitesi oluşturucuları hakkında ayrıntılı bir rehber.
3. Yapay Zeka Kullanarak Sıfırdan Bir Web Sitesi Kodlamayı Öğrenin
Temel HTML ve CSS öğrenmek her zaman faydalıdır. Ancak, küçük bir ilk web sitesi oluşturmak için HTML veya CSS öğrenmenize gerek yok. ChatGPT, Claude ve Google Gemini gibi yapay zeka araçları aslında tüm kodu sizin için yazabilir ve açıklayabilir.
Nasıl çalıştığını göstermek için ChatGPT'den kurgusal bir tesisat işi işletmesi için temel bir ana sayfa kodlamasını istedik. İşte kullandığımız komut istemi:
İstem:
Create a responsive HTML + CSS website for a small business called Star Plumbing Services. It should include a homepage layout with a header, navigation bar, main content with 2 paragraphs, a CTA button, an image placeholder, and a footer with contact info.

Yapay zeka aracı, HTML ve CSS kullanarak temiz, duyarlı bir web sitesi düzenini anında oluşturdu. Yapay zeka, her bölümü açıklamak için koda yorumlar bile ekledi. Bu, özellikle meraklı bir yeni başlayan iseniz, ilerledikçe öğrenmek için harika bir yoldur.
Bilgisayarınıza kaydetmek ve bir tarayıcı penceresinde açmak için indirme düğmesine tıklayabilirsiniz.

Want to take it a step further? Try breaking your project into smaller pieces:
İstem:
Update the page and write HTML for a service section with 3 columns. Each column should have a service title, a one-sentence description, and an icon placeholder.
Bu komutları yapay zeka aracınıza beslemeye devam edebilir ve sayfa sayfa tüm bir web sitesini bir araya getirebilirsiniz. Kaybolmuş hissetmeden kodlama temellerini öğrenmenin şaşırtıcı derecede eğlenceli bir yolu.
Here is another example of a more detailed prompt:
İstem:
Update the page add a new section below services that builds trust with homeowners. Include:
- A bold, friendly headline like 'We Treat Your Home Like Our Own!'
- A short paragraph explaining Star Plumbing's honest pricing, quality service, and customer care
- Three bullet points for:
* Guaranteed, upfront pricing
* 100% satisfaction guarantee
* Certified plumbing partner (e.g., Nexstar Certified)
- A visual callout showing '45+ Years of Experience'
- Two CTA buttons: 'Schedule Online' and a phone number
That said, this method isn’t for everyone. You’ll still need to manually paste the code into a code editor like VS Code or Sublime Text, troubleshoot little bugs, and understand how files are organized.
Ayrıca bir web sitesi barındırma hesabına ve bir alan adına ihtiyacınız olacaktır. Bundan sonra, web sitesi dosyalarınızı barındırma hesabınıza bir FTP istemcisi veya barındırma hesabınız altında bulunan Dosya Yöneticisi uygulaması aracılığıyla yüklemeniz gerekecektir.
If that feels like too much work, you’re not alone. That’s why many people choose tools like WordPress and SeedProd — because they give you all the flexibility of a custom-coded site, but with a much smoother learning curve.
Bir Web Sitesini Kodlamak İçin Yapay Zekayı Kullanmanın Artıları
- Minimum deneyimle gerçek kod üretmenin hızlı bir yolu.
- Gerçek örneklerle HTML/CSS'yi adım adım öğrenmek için faydalıdır.
- Great for students, tinkerers, or people who love experimenting.
- Yapay zeka tarafından oluşturulan kodu birden çok projede yeniden kullanabilirsiniz.
Göz Önünde Bulundurulması Gereken Eksiler
- Manuel kurulum gerektirir: kod dosyalarını kaydetme, tarayıcıda önizleme ve klasörleri düzenleme.
- Zamanınız kısıtlıysa veya HTML/CSS sorunlarını ayıklama konusunda bilginiz yoksa ideal değil.
Teknik engeller olmadan çalışan bir web sitesi oluşturmaya daha çok odaklanıyorsanız, SeedProd gibi sürükle ve bırak oluşturucu ile WordPress kullanmak hala en kolay ve en esnek seçenektir.
4. Sıfırdan Bir Web Sitesi Kodlamayı Öğrenin
Web sitelerinin perde arkasında nasıl çalıştığı konusunda meraklıysanız, sıfırdan bir tane kodlamayı öğrenmek harika bir egzersizdir. Bu size HTML, CSS ve web sayfalarının nasıl yapılandırıldığı hakkında daha derin bir anlayış kazandırır.
Codecademy'den gelen kurs gibi yeni başlayan dostu bir kursla başlamanızı öneririz. Yaklaşık 9 saat sürer ve HTML, CSS ve Bootstrap kullanarak duyarlı bir web sitesi oluşturma konusunda size yol gösterir.
Temelleri öğrendikten sonra pratik yapma zamanı. Aşağıda, yalnızca HTML ve CSS kullanarak - ekran görüntülerinde kullandığımız kodla - temel bir statik web sitesi oluşturma konusunda size yol göstereceğiz.
Temel Bir Statik Web Sitesi Kodlamak
Websites are usually made up of three main components:
- HTML: Web sayfalarınızın yapısı ve içeriği — metin, resimler ve düğmeler gibi.
- CSS: Renkler, boşluklar, yazı tipleri ve düzen gibi stil.
- JavaScript: (İsteğe bağlı) Etkileşim ekler — resim kaydırıcıları, açılır pencereler ve form doğrulama gibi.
Başlamak için Sublime Text, VS Code veya Notepad++ gibi bir kod düzenleyiciye ihtiyacınız olacak.

Bilgisayarınızda benimsitem gibi bir isimle yeni bir klasör oluşturun. Ardından, bu klasörün içine index.html adında yeni bir dosya oluşturun - bu, web sitenizin ana sayfası olacaktır.
Temel HTML yapısını ekleyerek başlayın:
<!DOCTYPE html>
<html>
<head>
<title>Star Plumbing Services</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Content will go here -->
</body>
</html>
Ardından, <body> bölümünün içine düzeninizi ve içeriğinizi ekleyin.
İşte eksiksiz bir örnek:
<header class="site-header">
<h1 class="site-title">Star Plumbing Services</h1>
<nav class="site-navigation">
<ul class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article class="content">
<h2>The Best Plumbing Service Providers in Pawnee!</h2>
<p>We provide top-quality plumbing services for homes and businesses alike.</p>
<p><a href="contact.html" class="cta-button">Call Now</a></p>
<p><img src="images/plumbing-services.jpg" alt="Plumbing in action" width="600" /></p>
</article>
<footer>
<p>© 2025 Star Plumbing Services. All Rights Reserved.</p>
</footer>
Şimdi, aynı klasöre style.css adında yeni bir dosya oluşturun.
Ardından, aşağıdaki kodu içine yapıştırın:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #f2ffee;
}
.site-header {
background-color: #2751ac;
color: white;
padding: 20px;
overflow: auto;
}
.site-title {
float: left;
}
.site-navigation {
float: right;
margin: 20px 50px 0 0;
}
.nav-menu {
list-style: none;
padding: 0;
}
.nav-menu li {
display: inline;
padding-right: 20px;
}
.content {
max-width: 60%;
margin: 50px auto;
padding: 30px;
background-color: #fff;
font-size: 18px;
}
.cta-button {
background-color: green;
color: white;
padding: 20px 100px;
text-decoration: none;
font-size: 24px;
border-radius: 18px;
}
footer {
background-color: #2751ac;
color: white;
padding: 20px;
text-align: center;
}
images adında bir alt klasör oluşturun ve sayfada görünmesi için plumbing-services.jpg adında bir resim ekleyin.
Her şey kaydedildikten sonra, index.html dosyanıza çift tıklayarak tarayıcınızda açın. Sitenizin, ekran görüntüsündeki gibi hayata geçtiğini görmelisiniz.

Bir Web Sitesini Sıfırdan Kodlamanın Artıları
- Web sitelerinin perde arkasında nasıl çalıştığını öğrenmek için harika.
- Düzen, stil ve yapı üzerinde tam kontrol sağlar.
- Web geliştirme veya programcılık alanında profesyonel olarak ilerlemeyi planlıyorsanız faydalıdır.
Göz Önünde Bulundurulması Gereken Eksiler
- Özellikle yeni başlayanlar için çok zaman ve pratik gerektirir.
- Her sorunu kendiniz manuel olarak gidermeniz ve hata ayıklamanız gerekecektir.
- Bloglar, mağazalar veya formlarla karmaşık siteler oluşturmak için ölçeklenemez.
Sadece kod yazmayı öğrenmek yerine gerçek bir web sitesi başlatmak istiyorsanız, SeedProd gibi bir oluşturucu eklentisine sahip WordPress, yeni başlayanlar için çok daha iyi bir seçenektir.
Tasarımınızı sürükleyip bırakabilir, iletişim formları ve SEO gibi özellikler ekleyebilir ve kod yazmadan dakikalar içinde sitenizi yayınlayabilirsiniz.
Bir Web Sitesini Kodlamanın En İyi Yolu Hangisidir?
Herkese uyan tek bir cevap yok, ancak binlerce kullanıcının web sitesi başlatmasına yardımcı olma deneyimimize dayanarak önerdiklerimiz şunlardır:
- SeedProd ile WordPress Kullanın, yeni başlayan biriyseniz veya tam kontrol, özelleştirme seçenekleri ve büyüme alanı olan profesyonel bir web sitesi oluşturmak istiyorsanız. Çoğu sitemiz için bunu kullanıyoruz. WordPress ile başlamak için Bluehost hesabına kaydolmak için buraya tıklayın.
- Hızlı bir şekilde küçük işletme web sitesini çevrimiçi hale getirmek ve temel bilgilerin ötesinde fazla özelleştirme yapmayı planlamıyorsanız Wix'i Kullanın. Wix ile başlamak için buraya tıklayın.
- Bir öğrenci veya programlama öğrenmek ya da yüksek derecede özelleştirilmiş web siteleri oluşturmak isteyen bir meraklıysanız, sıfırdan kod yazmayı öğrenin (manuel olarak veya yapay zeka ile). Sadece öğrenme eğrisinin dik olduğunu, özellikle HTML, CSS ve JavaScript'e yeni başlıyorsanız unutmayın.
Hangi yöntemi seçerseniz seçin, kendinize güvenerek yönetebileceğiniz ve zamanla geliştirebileceğiniz bir şeyler inşa etmeye odaklanın. Başarılı bir web sitesinin gerçek anahtarı budur.
Umarım bu makale bir web sitesini nasıl kodlayacağınızı öğrenmenize yardımcı olmuştur. WordPress'i tercih ettiyseniz, WordPress'i (ücretsiz olarak) bir haftadan kısa sürede öğrenmek veya yeni başlayanlar için en iyi kod düzenleyicilerine göz atmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.

Mrteesurez
Web geliştirmenin temellerini öğrenme konusundaki noktaya kesinlikle katılıyorum. WordPress gibi kodsuz araçlar, herkesin hızlı bir şekilde bir web sitesi oluşturmasını kolaylaştırmış olsa da, HTML, CSS, JavaScript ve PHP hakkında sağlam bir anlayışa sahip olmak, sitenizi tam olarak istediğiniz gibi özelleştirmenize ve ince ayar yapmanıza olanak tanır. Bu temelleri bilmenin, bir eklenti veya bana bu işlevi sağlayacak araçları bulamadığım belirli ayarlamalar yapmam gerektiğinde faydalı olduğunu gördüm. Harika makale, bu içgörülerle dolu rehberi paylaştığınız için teşekkürler!
Ayanda Temitayo
WordPress ve diğer CMS platformları gibi kodsuz araçlar web sitesi oluşturmayı demokratikleştirmiş olsa da, bu makalede bahsedilen web geliştirme dillerinin temellerini öğrenmeyi hala savunuyorum: HTML, CSS, JavaScript ve PHP.
Bir web sitesi geliştirmek için kod yazmak, WordPress gibi kodsuz araçları kullanmaya kıyasla çok zaman alır. Ancak işlevleri kolayca ayarlayabilir ve zevkinize göre özelleştirebilirsiniz.
Bu makalede harika bilgiler var. Teşekkürler
Dayo Olobayo
Web geliştirme dünyasında acemiyim ama ikinci paragrafla kendimi aynı fikirde bulamıyorum. Web sitem, WordPress veya kod hakkında önceden bir fikrim olmadan yayında ve çalışıyor ama tam istediğim gibi. Daha ilginç olanı, özelleştirme ve stil oluşturmaya yardımcı olan eklentilerin olması. Derin kodlar ve benzerlerinin bu kadar zahmetli bir öğrenme sürecinden geçmek yerine, bu eklentilerin nasıl kullanılacağını öğrenmeye zaman harcamayı tercih ederim.
Jiří Vaněk
Merhaba Dayo Olobayo,
İkinci paragrafla ilgili olarak, aslında katılıyorum. Evet, kodlama bilgisi olmadan WordPress'te bir web sitesi oluşturmak mümkündür, ancak daha sonra böyle bir web sitesini hız için PageSpeed'de test ederseniz veya web sitesini güvenlik açıkları açısından kontrol ederseniz, hatalar, zayıflıklar veya hız sınırlamaları bulabilirsiniz. Yani evet, WordPress ile kod veya programlama bilmeniz gerekmez, ancak bir web sitesinin bir programcı tarafından mı yoksa bir acemi tarafından mı yapıldığını anlayabilirsiniz. Genellikle, çıplak gözle görülmeyen ayrıntılarda gizlidir.
Peter Iriogbe
WordPress ve diğer CMS platformları kodlama deneyimi olmayan birçok insanın harika bir web sitesi oluşturmasını kolaylaştırmış olsa da, bu makalede bahsedilen web geliştirme dillerinin temellerini öğrenmenizi hala tavsiye ederim: HTML, CSS, JavaScript ve PHP. Bu dillerde bilgi edinmek, kullanıcıların sitelerini manuel olarak özelleştirmelerine veya bir kuruş harcamadan sorunları gidermelerine olanak tanıyacaktır.
Ek olarak, bu dillerde yetkinlik kazanmak, web sitenize yaratıcı ve işlevsel geliştirmeler için sonsuz olanaklar sunar.
ALLAH'A ŞÜKÜR JONATHAN
Bir web sitesini kodlayabileceğimi hiç düşünmezdim ama bu rehber çok kolay görünmesini sağladı. Artık kendi sitemi yapabileceğimi bilmek beni heyecanlandırıyor! Ancak, Wordpress burada varken endişelenecek bir şey olduğunu sanmıyorum.
Jiří Vaněk
Son zamanlarda yapay zeka kullanma konusunda çok şey öğrendim. Örneğin, WordPress kod parçacıkları için harika. WordPress'in yapay zeka tarafından oluşturulan bir kod parçacığı oluşturması için tam olarak neye ihtiyacım olduğunu belirtiyorum. İlk denemede her zaman başarılı olmuyor ama sonuca ulaşıyoruz. Harika olan şey, kod parçacığı çalıştığında, yapay zekadan her bir öğenin nasıl çalıştığını açıklamasını istemem. Bana çok şey öğretti.
WPBeginner Desteği
You need to be careful of AI hallucinating but that is certainly a way to learn more
Yönetici
Moinuddin Waheed
Ayrıca belirli kod parçacıkları yazmak için ChatGPT'yi de kullandım ve biraz kodlama geçmişim olduğu için neyin işe yarayıp neyin yaramadığını benim için kolayca anlamlı hale getiriyor.
Bu araçlar, kod yazma sürecini daha da hızlandırdı. İhtiyaçlarımıza uygun hale getirmek için sadece bazı küçük ayarlamalar yapmamız gerekiyor.
Jiří Vaněk
Ancak eklentinin güvenliğine dikkat etmek iyidir. Bazı kodlar yapay zeka tarafından yanlış yazılabilir. Bu nedenle, emin olmak için, chat GPT kullanılarak yazılmış bir kod parçacığım var ve çalıştığı noktaya geldiğimde, kodda herhangi bir boşluk olup olmadığını bana söylemesi için genellikle Google'dan Bard ile kontrol ettiririm. Sorunu ortadan kaldırmak için oldukça iyi bir uygulama.
A Owadud Bhuiyan
Paylaştığınız için teşekkürler.
Web sitesi inceleme hakkında herhangi bir makaleniz var mı?
WPBeginner Desteği
Aşağıda göz atabileceğiniz incele öğesini nasıl kullanacağınıza dair bir rehberimiz var:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
Ralph
I remember learning HTML in school and was proud of first website that was basically plain text and color background. However after many years i came to conclusion it is just not for me and I prefer website builders. But knowing basics and having any idea how “to think” is really helpful when you want to customize something, that theme author didn’t think about.
Jiří Vaněk
HTML ile başladım ve ilk web sitelerim HTML'deydi. Ardından, 2006'da bir veri merkezinde ikinci seviye yönetici olarak çalışmaya başladım ve WordPress, Joomla, phpBB ve Drupal öğrenmeye başladım. Bu, PHP ve CSS'in temellerini kavramamı sağladı. Özellikle CSS bilmek günümüzde gerçekten faydalı çünkü hazır bir şablon indirebilseniz veya Elementor'u kullanabilseniz bile, CSS biliyorsanız her şeyi istediğiniz gibi ince ayar yapabilirsiniz.
Moinuddin Waheed
Web sitesi yapmak için kod yazmak zaman ve çaba gerektirir ve bu bazen insanları bunaltıp süreçten vazgeçirebilir. Elbette kodlama öğrenmenin faydaları vardır ancak herkesin ilgi alanı değildir.
Oysa modern araçları kullanarak web sitesi oluşturmak çok daha kolay ve uygun maliyetlidir, ancak bunun da bazı dezavantajları vardır.
Seedprod gibi bu eklentiler her geliştiricinin hayatını daha kolay ve verimli hale getirmiştir.
Her iki tarafın da artı ve eksilerine bütünsel bir yaklaşım getirdiğiniz için teşekkürler.
WPBeginner Desteği
Rica ederim!
Yönetici
Olaniyi Ifeoluwa
Bu faydalı makale için teşekkürler.
Lütfen bir web sitesini sıfırdan kodlama konusunda, hala alan adı ve hosting satın almam gerekiyor mu?
WPBeginner Desteği
Test etmek için isterseniz siteyi bilgisayarınızda oluşturabilirsiniz. Kullanıcıların sitenizi görmesine izin vermek için bir barındırma sağlayıcısı ve alan adı kullanmanızı öneririz, çünkü o zaman bunlar gerekecektir.
Yönetici
Moinuddin Waheed
Web sitenizi dünyaya sergilemek için alan adı ve barındırma hizmetleri gereklidir.
Bu nedenle, web sitesi manuel olarak kodlanmış veya sayfa oluşturucular kullanılarak oluşturulmuş olsa da, arka planda iyi optimize edilmiş kodlar olsa da, web sitesini barındırmak ve dünyaya göstermek için barındırma gereklidir.
Öğrenme ve test etme amaçları için her zaman yerel IDE'lerinizi kullanabilir ve web sitenizi kodlayabilirsiniz.
Muntaha
Bunu sevdim çünkü içindeki her şey her zaman yardımcı oluyor... Teşekkürler
WPBeginner Desteği
Glad you found our guide helpful
Yönetici
Ehis
Bu harika, çok teşekkürler
WPBeginner Desteği
You’re welcome
Yönetici
Esther
Bu çok yardımcı oldu!
WPBeginner Desteği
Glad our article was helpful
Yönetici
Muhammad Atif
Vay canına, güzel makale. Harika eğitimler, ipuçları ve püf noktaları için seninle gerçekten gurur duyuyorum. Pakistanlı Syed Balkhi tarafından başlatılan Wpbegginer.
İyi hissediyorum.
WPBeginner Desteği
Thank you, glad you like our content
Yönetici