Web Geliştirmeye Giriş: Haftanın İlk Adımları ve Temel Kavramlar (Week-1)

Web Geliştirmeye Giriş: Haftanın İlk Adımları ve Temel Kavramlar (Week-1)

Web geliştirmeye başlamak göz korkutucu mu geliyor? Bu makale, Week-1’de atmanız gereken ilk adımları, temel kavramları ve modern web dünyasına girişinizi kolaylaştıracak bilgileri sunuyor. Sıfırdan başlayarak ilk web sayfanızı oluşturmaya hazır olun ve bu heyecan verici yolculuğa bizimle adım atın. Bu rehber, karmaşık teorilerden ziyade pratik uygulamalara odaklanarak, öğrenme sürecinizi keyifli ve verimli hale getirmeyi hedefliyor.

Web Geliştirme Yolculuğunuza Neden Şimdi Başlamalısınız?

Dijital dönüşümün hız kesmeden devam ettiği günümüzde, web geliştirme becerileri sadece bir kariyer yolu olmaktan öte, dijital okuryazarlığın temel bir parçası haline gelmiştir. İnternet, iş dünyasından eğlenceye, eğitimden sosyal etkileşime kadar hayatımızın her alanına nüfuz etmiş durumda. Dolayısıyla, web sayfaları, uygulamalar ve dijital deneyimler oluşturma yeteneği, günümüzün en değerli yetkinliklerinden biri olarak kabul ediliyor.

Peki, web geliştirme yolculuğunuza neden tam da şimdi başlamalısınız? Öncelikle, bu alan sürekli gelişen ve yenilikçi bir yapıya sahip. Her geçen gün yeni teknolojiler, Framework’ler (yazılım çerçeveleri) ve araçlar ortaya çıkıyor. Bu dinamik ortam, sürekli öğrenmeyi seven ve kendini geliştirmeye açık bireyler için eşsiz fırsatlar sunar. Üstelik, web geliştiricilere olan talep dünya genelinde ve Türkiye’de de hızla artıyor. Hem büyük kurumsal şirketlerde hem de startup (girişim) ekosisteminde yetenekli geliştiricilere ihtiyaç duyuluyor. Bu durum, istikrarlı bir kariyer ve cazip kazanç potansiyeli anlamına geliyor.

Web geliştirme sadece profesyonel bir alan değil, aynı zamanda yaratıcılığınızı ifade edebileceğiniz bir platformdur. Kendi fikirlerinizi hayata geçirebilir, kişisel projelerinizi tasarlayabilir ve dünyaya kendi dijital izlerinizi bırakabilirsiniz. Bir web sayfasını sıfırdan oluşturup, onun tarayıcıda canlandığını görmek, gerçekten tatmin edici bir deneyimdir. Ayrıca, web geliştirme becerileriyle freelance (serbest çalışma) olarak dünyanın her yerinden projeler alabilir, kendi çalışma saatlerinizi belirleyebilir ve coğrafi sınırlamalardan bağımsız bir yaşam kurabilirsiniz. Özellikle Türkiye’de, uzaktan çalışma imkanlarının artmasıyla birlikte, web geliştiriciler için esneklik ve bağımsızlık her zamankinden daha erişilebilir hale gelmiştir. Birçok kişi bu alana girmek istese de, başlangıç noktasını bulmakta zorlanabiliyor. Bu makale, tam da bu noktada, “Week-1” ile size sağlam bir temel atmayı ve ilk adımlarınızı güvenle atmanızı sağlamayı amaçlıyor. Bu nedenle, web geliştirme öğrenmeye başlamak için hiçbir zaman geç değildir; aslında, şu an en doğru zamandır.

Web’in Temel Taşları: HTML, CSS ve JavaScript’e İlk Bakış

Web geliştirme dünyasına adım attığınızda karşılaşacağınız ilk ve en temel üç teknoloji HTML, CSS ve JavaScript’tir. Bu üçlü, modern web’in yapı taşlarını oluşturur ve bir web sayfasının hem görünümünü hem de etkileşimini belirler. Onları bir evin inşasına benzetebiliriz: HTML evin iskeletini ve temel odalarını oluştururken, CSS bu evin boyasını, dekorasyonunu ve mimari tarzını belirler. JavaScript ise evin elektrik tesisatını, otomasyon sistemlerini ve hareketli parçalarını kontrol eder, yani evin interaktif (etkileşimli) olmasını sağlar. Bu benzetme, her birinin web sayfasındaki rolünü daha iyi anlamanıza yardımcı olacaktır.

Bu üç teknoloji arasındaki ilişki, birbiriyle ayrılmaz bir bütündür. HTML olmadan bir web sayfası var olamaz; CSS olmadan sayfa estetikten yoksun, sıradan görünür; JavaScript olmadan ise sayfa durağan kalır ve kullanıcıyla etkileşime giremez. Dolayısıyla, etkili ve modern bir web sitesi geliştirmek için bu üçünün temel prensiplerini anlamak ve bunları bir arada kullanmayı öğrenmek kritik öneme sahiptir. “Week-1” odak noktamızda, bu temel taşların her birine ayrı ayrı değinecek ve ilk adımlarınızı atmanıza yardımcı olacağız. Bu sayede, karmaşık web projelerine giriş yapmadan önce sağlam bir temel oluşturacaksınız.

HTML Nedir ve İlk Web Sayfanızı Nasıl Oluşturursunuz?

HTML, “HyperText Markup Language” (Köprü Metni İşaretleme Dili) kısaltmasıdır ve web sayfalarının yapısını oluşturmak için kullanılan standart işaretleme dilidir. Bir web sayfasındaki tüm içerik, başlıklar, paragraflar, resimler, bağlantılar, listeler ve tablolar gibi öğeler HTML etiketleri (tag) aracılığıyla tanımlanır. HTML, bir programlama dili değildir; daha ziyade, web tarayıcılarına içeriğin nasıl düzenleneceğini ve gösterileceğini anlatan bir dizi talimat setidir. Bu etiketler, tarayıcıların metni, medyayı ve diğer öğeleri doğru şekilde yorumlayarak kullanıcıya görsel bir sayfa sunmasını sağlar.

İlk web sayfanızı oluşturmak oldukça basittir. İhtiyacınız olan tek şey bir metin düzenleyici (Notepad, VS Code, Sublime Text gibi) ve bir web tarayıcısıdır (Chrome, Firefox gibi). İşte temel bir HTML sayfasının yapısı:

Yukarıdaki kodu bir metin düzenleyiciye yapıştırın ve dosyayı "index.html" olarak kaydedin. Ardından, bu dosyayı web tarayıcınızda açtığınızda, ilk web sayfanızı görmüş olacaksınız. Şimdi bu yapının temel öğelerini inceleyelim:

• <!DOCTYPE html>: Bu, belgenin HTML5 standardında olduğunu belirtir. Her HTML dosyasının başında yer almalıdır.
• <html lang="tr">: Tüm HTML içeriğini kapsayan kök etikettir. lang="tr" özelliği, sayfanın dilinin Türkçe olduğunu belirtir, bu da arama motorları ve ekran okuyucular için önemlidir.
• <head>: Sayfa hakkında meta bilgileri (sayfayı tanımlayan bilgiler) içerir. Tarayıcıda görünmez, ancak sayfanın nasıl işleneceğini, arama motorlarının nasıl indeksleyeceğini belirler.
• <meta charset="UTF-8">: Karakter kodlamasını belirtir. Türkçe karakterler de dahil olmak üzere tüm karakterlerin doğru görüntülenmesi için önemlidir.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mobil cihazlarda sayfanın doğru ölçeklenmesini sağlar.
• <title>İlk Web Sayfam</title>: Tarayıcı sekmesinde veya pencere başlığında görünen metni belirler.
• <body>: Web sayfasının asıl görünen içeriğini barındırır. Başlıklar, paragraflar, resimler, bağlantılar gibi her şey bu etiketin içine yazılır.
• <h1>: En önemli başlık etiketidir (Heading 1). Sayfada sadece bir tane <h1> kullanılması önerilir.
• <p>: Paragraf metni için kullanılır.
• <a>: Köprü (link) oluşturmak için kullanılır. href özelliği, bağlantının gideceği URL’yi belirtir.
• <img>: Resim eklemek için kullanılır. src özelliği resmin kaynağını, alt özelliği ise resim yüklenemediğinde veya ekran okuyucular için alternatif metni belirtir.
• <ul> ve <li>: Sırasız liste (Unordered List) ve liste öğeleri (List Item) oluşturmak için kullanılır.

HTML etiketleri genellikle bir açılış etiketi (<etiket>) ve bir kapanış etiketi (</etiket>) ile gelir ve içerik bu ikisi arasına yerleştirilir. Bazı etiketler, örneğin <img> veya <meta>, tek başına kullanılır ve kapanış etiketine ihtiyaç duymaz. Bu temel bilgilerle, Week-1 sonunda basit ama anlamlı HTML sayfaları oluşturabilecek ve web geliştirmenin ilk adımını atmış olacaksınız.

CSS ile Web Sayfanıza Hayat Vermek: Temel Seçiciler ve Özellikler

HTML bir web sayfasının iskeletini oluştururken, CSS (Cascading Style Sheets – Basamaklı Stil Sayfaları) bu iskelete görsel bir estetik kazandırır. Renkler, yazı tipleri, boyutlar, boşluklar, düzen ve animasyonlar gibi tüm görsel öğeler CSS aracılığıyla tanımlanır. CSS, web sayfalarınızın profesyonel ve çekici görünmesini sağlar, aynı zamanda içeriğin sunumunu yapıdan ayırarak daha düzenli ve yönetilebilir bir kodlama süreci sunar. Bu ayrım, bir web sitesinin görünümünü değiştirmek istediğinizde, HTML yapısını bozmadan kolayca stil güncellemeleri yapabilmenizi sağlar.

CSS kodunu HTML belgesine eklemenin üç temel yolu vardır: satır içi (inline), dahili (internal) ve harici (external). En iyi uygulama ve en çok tercih edilen yöntem harici stil sayfaları kullanmaktır, çünkü bu yöntem kodunuzu daha modüler hale getirir ve birden fazla HTML sayfasında aynı stil dosyasını kullanmanıza olanak tanır. Harici bir CSS dosyası oluşturmak için, stil kurallarınızı içeren bir dosya (genellikle style.css adında) oluşturur ve bunu HTML dosyanızın <head> bölümüne bir <link> etiketi ile bağlarsınız. İşte bir örnek:

Şimdi, style.css dosyanıza ekleyebileceğiniz bazı temel CSS seçicileri ve özelliklerine göz atalım. Seçiciler, HTML belgesinde hangi öğelerin stilize edileceğini belirlerken, özellikler bu öğelere uygulanacak stilin türünü tanımlar.

Temel CSS Seçicileri:

• Element Seçici: Belirli bir HTML etiketinin tüm örneklerini seçer. Örneğin, tüm paragrafları (p) veya tüm başlıkları (h1) stilize etmek için kullanılır.

  
  h1 {
      color: darkblue;
  }
  p {
      font-size: 16px;
  }
                

• Class Seçici: Belirli bir class özelliğine sahip tüm öğeleri seçer. Bir HTML öğesine class="ozel-metin" gibi bir sınıf atayarak, bu sınıfa özel stil uygulayabilirsiniz. Sınıf seçiciler . (nokta) ile başlar.

  
  .ozel-metin {
      background-color: lightgray;
      padding: 10px;
  }
                

• ID Seçici: Belirli bir id özelliğine sahip tek bir öğeyi seçer. id‘ler bir sayfada benzersiz olmalıdır. ID seçiciler # (diyez) ile başlar.

  
  #ana-baslik {
      text-align: center;
      border-bottom: 2px solid gray;
  }
                

Yaygın CSS Özellikleri:

• color: Metin rengini ayarlar.
• background-color: Öğenin arka plan rengini ayarlar.
• font-family: Yazı tipini belirler (örneğin, Arial, sans-serif).
• font-size: Metin boyutunu ayarlar (örneğin, 18px, 1.2em).
• text-align: Metnin hizalamasını ayarlar (örneğin, left, center, right).
• margin: Öğenin dış boşluğunu ayarlar (diğer öğelerle arasındaki boşluk).
• padding: Öğenin iç boşluğunu ayarlar (içeriği ile kenarlığı arasındaki boşluk).
• border: Öğenin kenarlığını belirler (kalınlık, stil, renk).
• width / height: Öğenin genişliğini ve yüksekliğini ayarlar.

Önceki HTML örneğimize stil ekleyelim. index.html dosyanızın <head> bölümüne <link rel="stylesheet" href="style.css"> satırını ekleyin. Ardından, style.css adında yeni bir dosya oluşturun ve içine aşağıdaki kodları yazın:

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4; /* Açık gri arka plan */
    color: #333; /* Koyu gri metin rengi */
}

h1 {
    color: #0056b3; /* Mavi başlık */
    text-align: center;
    margin-bottom: 30px;
}

p {
    line-height: 1.6;
    margin-bottom: 15px;
}

a {
    color: #007bff; /* Mavi bağlantı */
    text-decoration: none; /* Alt çizgiyi kaldır */
}

a:hover {
    text-decoration: underline; /* Üzerine gelince alt çizgi ekle */
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Resmi blok seviyesinde göster */
    margin: 20px auto; /* Üstte ve altta boşluk, ortala */
    border: 1px solid #ddd;
    border-radius: 5px;
}

ul {
    list-style-type: square; /* Kare madde işareti */
    margin-left: 25px;
}

li {
    margin-bottom: 8px;
}
      

Bu CSS kodları, sayfanızın genel görünümünü iyileştirecek ve daha profesyonel bir hava katacaktır. HTML ve CSS’in bu temel prensiplerini anlamak, Week-1 öğreniminizin en kritik parçasıdır. Bu sayede, web sayfalarınızın sadece bilgi içermekle kalmayıp, aynı zamanda görsel olarak da çekici olmasını sağlayabileceksiniz.

Gerçek Dünya Senaryosu: Basit Bir Kişisel Portfolyo Sayfası Oluşturma

Şimdiye kadar öğrendiğimiz HTML ve CSS temel bilgilerini gerçek bir senaryo üzerinde uygulayarak pekiştirelim. Hayal edin ki, yeni mezun bir yazılımcısınız veya web geliştirme alanına ilgi duyan bir profesyonelsiniz. İş başvurularınızda veya networking (ağ oluşturma) etkinliklerinde kendinizi tanıtmak için basit ama etkili bir kişisel portfolyo (özgeçmiş) sayfasına ihtiyacınız var. Bu sayfa, sizin kim olduğunuzu, ne tür projeler yaptığınızı ve iletişim bilgilerinizi potansiyel işverenlere veya iş ortaklarına sunacak. “Week-1” hedeflerimiz doğrultusunda, bu senaryo üzerinden adım adım ilerleyerek hem HTML yapısını kuracak hem de CSS ile bu sayfayı görsel olarak şekillendireceğiz.

Bu proje, sadece teorik bilgileri pratik bir uygulamaya dönüştürmekle kalmayacak, aynı zamanda web geliştirmenin temel prensiplerini pekiştirmenize yardımcı olacaktır. Bir portfolyo sayfası, kişisel markanızı oluşturmanın ve dijital dünyada var olmanın ilk adımlarından biridir. Ayrıca, bu tür bir proje, gelecekte daha karmaşık web uygulamaları geliştirmek için sağlam bir temel oluşturmanıza olanak tanır. Türkiye’deki iş piyasasında, geliştiricilerin kendilerini dijital ortamda iyi ifade etmeleri ve örnek çalışmalarını sergilemeleri büyük önem taşımaktadır. Bu yüzden, basit bir portfolyo sayfası bile kariyerinizde önemli bir fark yaratabilir. Şimdi, bu kişisel portfolyo sayfasını nasıl oluşturacağımıza dair adımlara geçelim.

Adım 1: Portfolyonun HTML İskeletini Kurma

Portfolyo sayfamız için öncelikle HTML iskeletini oluşturacağız. Bu iskelet, sayfanın ana bölümlerini (başlık, hakkımda, projeler, iletişim) tanımlayacak ve içeriğin semantik (anlamsal) yapısını belirleyecektir. Semantik HTML etiketleri kullanmak, sayfanın hem arama motorları tarafından daha iyi anlaşılmasına hem de erişilebilirlik (accessibility) açısından daha iyi olmasına yardımcı olur. index.html dosyanızı açın ve aşağıdaki kodları yapıştırın:

Bu HTML yapısında, <header> (başlık), <main> (ana içerik), <section> (bölüm) ve <footer> (alt bilgi) gibi HTML5 semantik etiketlerini kullandık. Bu etiketler, içeriğin amacını açıkça belirtir ve sayfanın okunabilirliğini artırır. Ayrıca, gezinme için bir <nav> etiketi ve liste öğeleri için <ul> ve <li> kullandık. <img> etiketine profil-resmi sınıfı ekleyerek, CSS ile özel stil uygulamak için bir hedef belirledik. Proje kutuları için de proje-kutusu sınıfını kullandık. Bu şekilde, HTML içeriğimizi düzenli ve anlamlı bir şekilde yapılandırdık.

Adım 2: CSS ile Portfolyo Sayfasını Şekillendirme

HTML iskeletimizi oluşturduktan sonra, sıra geldi style.css dosyamızı düzenleyerek portfolyo sayfamıza görsel bir kimlik kazandırmaya. Amacımız, sayfanın temiz, modern ve kullanıcı dostu görünmesini sağlamak. Öncelikle genel sayfa stillerini ayarlayacak, ardından her bir bölüme özel dokunuşlar yapacağız. style.css dosyanızı açın ve aşağıdaki kodları ekleyin:

/* Genel Stil Ayarları */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
    color: #333;
}

.container { /* Sayfa içeriğini ortalamak ve genişliği sınırlamak için */
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
}

/* Header Stilleri */
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

header p {
    font-size: 1.1rem;
    margin-top: 5px;
}

header nav ul {
    padding: 0;
    list-style: none;
}

header nav ul li {
    display: inline;
    margin-right: 20px;
}

header nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

header nav a:hover {
    color: #ffc107; /* Sarımsı renk */
}

/* Bölüm Stilleri */
section {
    padding: 40px 0;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    margin-bottom: 20px;
}

section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

section h2 {
    text-align: center;
    color: #007bff;
    margin-bottom: 30px;
    font-size: 2rem;
}

/* Hakkımda Bölümü */
.profil-resmi {
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 50%; /* Yuvarlak resim */
    width: 150px;
    height: 150px;
    object-fit: cover; /* Resmin oranını korurken kutuyu doldur */
    border: 3px solid #007bff;
}

/* Projeler Bölümü */
.proje-kutusu {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.proje-kutusu h3 {
    color: #333;
    margin-top: 0;
}

.proje-kutusu a {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

.proje-kutusu a:hover {
    background-color: #0056b3;
}

/* İletişim Bölümü */
#iletisim ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#iletisim ul li {
    margin-bottom: 10px;
}

#iletisim a {
    color: #007bff;
    text-decoration: none;
}

#iletisim a:hover {
    text-decoration: underline;
}

/* Footer Stilleri */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 30px;
}
      

Bu CSS kodu ile:

• body için genel yazı tipi, arka plan rengi ve metin rengi ayarlandı.
• header için koyu arka plan, beyaz metin ve merkez hizalama uygulandı. Gezinme bağlantılarının üzerine gelindiğinde renk değiştirmesi sağlandı.
• Her section (bölüm) için beyaz arka plan, iç boşluk ve alt kenarlık eklendi.
• Profil resmi için .profil-resmi sınıfı kullanılarak yuvarlak bir şekil, ortalama ve kenarlık verildi.
• Proje kutuları için .proje-kutusu sınıfı ile hafif bir gölge, kenarlık, iç boşluk ve yuvarlak köşeler eklendi.
• İletişim bölümündeki liste öğeleri için madde işaretleri kaldırıldı ve metin ortalandı.
• footer için header ile benzer bir stil uygulandı.

Bu CSS kodlarını style.css dosyanıza kaydettikten sonra index.html dosyanızı tarayıcınızda açtığınızda, basit ama profesyonel görünümlü kişisel portfolyo sayfanızı göreceksiniz. Bu, “Week-1” sonunda HTML ve CSS ile neler yapabileceğinize dair somut bir örnektir ve sizi daha ileri seviyelere taşımak için harika bir başlangıç noktasıdır.

Week-1 Sonrası İleri Adımlar ve Öğrenme İpuçları

Web geliştirme yolculuğunuzun “Week-1″ini başarıyla tamamladınız ve HTML ile CSS’in temel prensiplerini kavradınız. Artık statik web sayfaları oluşturabiliyor ve onlara görsel bir estetik kazandırabiliyorsunuz. Ancak bu yolculuk daha yeni başlıyor ve önünüzde keşfedilecek birçok heyecan verici konu var. Bu bölümde, Week-1 sonrası atabileceğiniz ileri adımlara ve öğrenme sürecinizi daha verimli hale getirecek ipuçlarına değineceğiz. Unutmayın, sürekli öğrenme ve pratik yapma, bu alanda başarılı olmanın anahtarıdır.

Öncelikle, öğrendiğiniz temel bilgileri pekiştirmek için küçük projeler yapmaya devam edin. Örneğin, farklı temalarda (yemek tarifi sitesi, yerel bir işletmenin tanıtım sayfası, basit bir fotoğraf galerisi) yeni web sayfaları oluşturmaya çalışın. Her yeni projede, daha önce kullanmadığınız HTML etiketlerini veya CSS özelliklerini denemekten çekinmeyin. Bu pratikler, bilginizi sağlamlaştıracak ve karşılaşabileceğiniz farklı senaryolara karşı sizi hazırlayacaktır. Ayrıca, projelerinizi geliştirirken tarayıcı geliştirici araçlarını (Browser Developer Tools) kullanmayı öğrenmek, hata ayıklama (debugging) ve stil ayarlamaları yapma becerilerinizi büyük ölçüde geliştirecektir. Modern tarayıcıların sunduğu bu araçlar, web sayfanızın HTML yapısını, CSS stillerini ve hatta JavaScript kodunu anında incelemenize ve değiştirmenize olanak tanır.

Bir sonraki önemli adım, JavaScript öğrenmeye başlamaktır. JavaScript, web sayfalarınıza interaktif özellikler eklemenizi sağlayan bir programlama dilidir. Kullanıcı girişlerini işlemek, dinamik içerik yüklemek, animasyonlar oluşturmak ve hatta sunucu tarafı (back-end) geliştirme yapmak için JavaScript kullanılır. Week-1’de HTML ve CSS ile iskeletini ve görünümünü oluşturduğunuz bir web sitesine, JavaScript ile adeta can verebilirsiniz. Bu, web geliştirme piramidinin üçüncü ve son temel katmanıdır. JavaScript öğrenirken, DOM (Document Object Model – Belge Nesne Modeli) manipülasyonu, olay dinleyicileri (event listeners) ve temel programlama mantığı gibi konulara odaklanmanız faydalı olacaktır.

Ayrıca, versiyon kontrol sistemlerini, özellikle Git ve GitHub’ı öğrenmek, profesyonel bir geliştirici olmak için vazgeçilmezdir. Git, projelerinizin kod geçmişini yönetmenizi ve farklı versiyonlar arasında kolayca geçiş yapmanızı sağlarken, GitHub bu projeleri çevrimiçi olarak depolamanıza, paylaşmanıza ve diğer geliştiricilerle işbirliği yapmanıza olanak tanır. Bu araçlar, kodunuzu güvende tutmanın yanı sıra, bir geliştirici olarak portfolyonuzu oluşturmanın ve yeteneklerinizi sergilemenin de en etkili yoludur. Türkiye’deki birçok teknoloji şirketi, işe alım süreçlerinde adayların GitHub profillerini incelemeyi tercih etmektedir.

Öğrenme kaynakları konusunda ise, MDN Web Docs (Mozilla Developer Network) ve FreeCodeCamp gibi platformlar harika başlangıç noktalarıdır. MDN, web teknolojileri hakkında kapsamlı ve güncel dokümantasyon sunarken, FreeCodeCamp interaktif dersler ve projeler aracılığıyla pratik öğrenme deneyimleri sağlar. Udemy ve Coursera gibi platformlarda da ücretli veya ücretsiz birçok kaliteli kurs bulabilirsiniz. Son olarak, yerel veya çevrimiçi geliştirici topluluklarına katılmak, sorularınızı sormak, deneyimlerinizi paylaşmak ve diğer geliştiricilerle etkileşimde bulunmak, öğrenme sürecinizi hızlandıracak ve motivasyonunuzu yüksek tutacaktır. Unutmayın, web geliştirme bir maratondur, sprint değil. Sabırlı olun, pratik yapın ve sürekli öğrenmeye açık kalın.

Sonuç: Web Geliştirme Yolculuğunuz Başladı!

Web geliştirme dünyasına attığınız ilk adım olan “Week-1″i başarıyla tamamladınız. Bu makale boyunca, web’in temel yapı taşları olan HTML ve CSS’i derinlemesine inceledik, ilk web sayfanızı nasıl oluşturacağınızı ve ona nasıl stil kazandıracağınızı öğrendik. Ayrıca, edindiğiniz bu temel bilgileri gerçek bir senaryo üzerinde, yani basit bir kişisel portfolyo sayfası oluşturarak pekiştirdik. Artık bir web sayfasının iskeletini kurabiliyor, ona renkler, yazı tipleri ve düzen ekleyebiliyorsunuz. Bu, dijital dünyada kendi varlığınızı oluşturmak için kritik bir başlangıç noktasıdır.

Unutmayın ki web geliştirme, sürekli öğrenme ve pratik yapma gerektiren dinamik bir alandır. Week-1’de edindiğiniz bu temel bilgiler, sizi daha ileri seviyelere taşıyacak sağlam bir zemin oluşturuyor. JavaScript öğrenmeye başlamak, versiyon kontrol sistemlerini kullanmak ve aktif olarak projelere katılmak, bu yolculukta sizi bir sonraki seviyeye taşıyacak anahtarlardır. Her yeni kod satırı, her yeni proje, sizi daha yetkin ve kendine güvenen bir geliştirici yapacaktır. Bu heyecan verici yolculukta başarılar dileriz; web dünyası sizin yaratıcılığınızı bekliyor!

Sıkça Sorulan Sorular (SSS)

1. Web geliştirmek için hangi programlama dillerini bilmeliyim?

   Web geliştirmenin temelinde HTML (işaretleme dili), CSS (stil dili) ve JavaScript (programlama dili) bulunur. Front-end (ön yüz) geliştirme için bu üçü olmazsa olmazdır. Back-end (arka yüz) geliştirme için ise Python, Node.js (JavaScript tabanlı), PHP, Ruby veya Java gibi dillerden birini öğrenmeniz gerekebilir. Veritabanı yönetimi için SQL de önemlidir.

2. Ne kadar sürede bir web sitesi yapabilirim?

   Basit, statik bir web sitesini (Week-1’de öğrendiklerinizle) birkaç saat veya birkaç gün içinde oluşturabilirsiniz. Ancak dinamik özelliklere sahip, karmaşık ve kullanıcı etkileşimli bir web uygulaması geliştirmek, projenin kapsamına ve sizin öğrenme hızınıza bağlı olarak haftalar, hatta aylar sürebilir. Önemli olan küçük adımlarla başlayıp sürekli pratik yapmaktır.

3. Web geliştirme için en iyi kaynaklar nelerdir?

   Başlangıç için MDN Web Docs (Mozilla Developer Network), FreeCodeCamp, W3Schools gibi ücretsiz platformlar harikadır. Detaylı ve yapılandırılmış eğitimler için Udemy, Coursera, Pluralsight gibi platformlardaki kursları değerlendirebilirsiniz. Ayrıca, YouTube’daki teknik kanallar ve Stack Overflow gibi forumlar da öğrenme sürecinizde size yardımcı olacaktır.

4. Front-end ve Back-end arasındaki fark nedir?

   Front-end (Ön Yüz), kullanıcıların bir web sitesiyle doğrudan etkileşim kurduğu kısımdır. Gördüğünüz tüm görsel öğeler, düğmeler, formlar ve düzenler front-end teknolojileri (HTML, CSS, JavaScript) ile oluşturulur. Back-end (Arka Yüz) ise sunucu, uygulama ve veritabanından oluşan, kullanıcıların doğrudan görmediği kısımdır. Kullanıcıların girdiği verileri işler, veritabanından bilgi alır ve front-end’e gönderir. Python, Node.js, PHP gibi diller back-end geliştirmede kullanılır.

5. Week-1’de öğrendiklerimle ne tür projeler yapabilirim?

   Week-1’de edindiğiniz HTML ve CSS bilgisiyle statik web sayfaları oluşturabilirsiniz. Örneğin, kişisel bir portfolyo sayfası, küçük bir işletmenin tanıtım sitesi, bir yemek tarifi blogu, basit bir fotoğraf galerisi veya CV’nizin (özgeçmişinizin) online versiyonunu yapabilirsiniz. Bu projeler, temel becerilerinizi pekiştirmek ve yaratıcılığınızı sergilemek için harika fırsatlardır.

#WebGeliştirme #HTML #CSS #Frontend #YazılımGeliştirme