Adım 3: CSS ile Tasarımı Şekillendirme

style.css dosyasını kullanarak uygulamanıza estetik bir görünüm kazandırın. Basit bir merkezi düzenleme ve elementlere biraz stil vermek başlangıç için yeterlidir.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 400px;
}

input[type="text"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

#weather-info {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}
    

Bu CSS kodları, uygulamanızın daha kullanıcı dostu ve modern görünmesini sağlar. Özellikle max-width: 400px; ve width: 90%; gibi responsive tasarım öğeleri, uygulamanızın farklı ekran boyutlarında daha iyi görünmesine yardımcı olur. CSS'te yapılan değişiklikler sonrası yine commit yapmayı unutmayın.

Adım 4: JavaScript ile Fonksiyonellik Kazandırma

script.js dosyanızı açın. Burada, şehir adını alacak, bir API'den hava durumu verilerini çekecek ve bu verileri weather-info div'inde gösterecek kodu yazacaksınız. API olarak OpenWeatherMap gibi ücretsiz bir servis kullanabilirsiniz. Bir API anahtarına ihtiyacınız olacağını unutmayın.

const cityInput = document.getElementById('city-input');
const getWeatherBtn = document.getElementById('get-weather-btn');
const weatherInfoDiv = document.getElementById('weather-info');

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY'; // Kendi API anahtarınızı buraya girin

async function getWeatherData(city) {
    try {
        const response = await fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=tr);
        if (!response.ok) {
            throw new Error('Şehir bulunamadı veya API hatası.');
        }
        const data = await response.json();
        displayWeather(data);
    } catch (error) {
        weatherInfoDiv.innerHTML = 
Hata: ${error.message};
        console.error('Hava durumu verisi alınamadı:', error);
    }
}

function displayWeather(data) {
    const cityName = data.name;
    const temperature = data.main.temp;
    const description = data.weather[0].description;
    const humidity = data.main.humidity;
    const windSpeed = data.wind.speed;

    weatherInfoDiv.innerHTML = 
${cityName}
        
Sıcaklık: ${temperature}°C
        
Açıklama: ${description}
        
Nem Oranı: %${humidity}
        
Rüzgar Hızı: ${windSpeed} m/s;
}

getWeatherBtn.addEventListener('click', () => {
    const city = cityInput.value.trim();
    if (city) {
        getWeatherData(city);
    } else {
        weatherInfoDiv.innerHTML = '
Lütfen bir şehir adı girin.
';
    }
});
    

Bu JavaScript kodu, fetch API'sini kullanarak asenkron bir şekilde hava durumu verilerini çeker ve DOM manipülasyonu ile sayfada gösterir. Hata yönetimi de eklenerek, kullanıcıya anlamlı geri bildirimler sunulur. Bu, web geliştirmede sıkça karşılaşılan bir desendir ve HNG13 gibi programlarda bu tür API entegrasyonlarını sıkça yapmanız gerekecektir. Tüm kodlama bittikten sonra, son commit'inizi yapın ve projenizi GitHub'a yükleyin: git add ., git commit -m "JavaScript fonksiyonelliği eklendi", git push origin main.

Vaka Analizi: Ekip Projesinde API Anahtarı Yönetimi

Bir HNG13 projesinde 3 kişilik bir ekip olarak çalışıyorsunuz. Hava durumu uygulamasını geliştirirken herkes kendi API anahtarını kullanmak istiyor ama anahtarların Git deposuna (GitHub) yüklenmemesi gerekiyor. Nasıl bir çözüm üretebilirsiniz? Cevap basit: .env dosyası ve .gitignore. Her ekip üyesi, projenin kök dizininde .env adında bir dosya oluşturur ve kendi API anahtarını bu dosyaya API_KEY=your_key_here şeklinde yazar. Ardından, .gitignore dosyasına .env satırını ekleyerek bu dosyanın Git tarafından izlenmesini engellersiniz. Böylece hassas bilgiler güvenli bir şekilde yerel olarak saklanır ve GitHub'a yüklenmez. JavaScript kodunuzda ise anahtarı doğrudan kullanmak yerine, geliştirme sunucunuzun ortam değişkenlerinden okursunuz (örneğin, Node.js tarafında process.env.API_KEY veya istemci tarafında bir bundler ile).

# .gitignore dosyası içeriği
.env
node_modules/
dist/
    

Karşılaşılan Zorluklar ve Çözümleri: HNG13 Sürecinde Yaygın Hatalardan Nasıl Kaçınılır?

HNG13 gibi yoğun programlarda öğrenme süreci genellikle inişli çıkışlıdır. Kod yazarken hatalarla karşılaşmak, beklenmedik sorunlarla boğuşmak bu sürecin doğal bir parçasıdır. Önemli olan, bu hatalardan ders çıkarabilmek ve çözüm yolları bulabilmektir. Bu bölümde, HNG13 katılımcılarının sıkça karşılaştığı zorlukları ve bu zorlukların üstesinden gelmek için kullanabileceğiniz stratejileri ve araçları ele alacağız. Yazılım geliştirmede "hata yapmak" aslında öğrenmenin en etkili yollarından biridir; ancak hataları hızlıca tespit edip çözmek, verimliliğinizi artırır.

Hata Ayıklama (Debugging) Sanatı

Kodunuz çalışmıyor mu? Beklediğiniz çıktıyı alamıyor musunuz? Muhtemelen bir hata var. Hata ayıklama, bir yazılımcının en temel ve en önemli becerilerinden biridir. Modern tarayıcılar (Chrome Developer Tools, Firefox Developer Tools) ve kod düzenleyicileri (VS Code Debugger) güçlü hata ayıklama araçları sunar. Console'a console.log() ile değişkenlerin değerlerini yazdırarak kodun akışını takip edebilir, breakpointler koyarak kodun belirli bir noktada durmasını sağlayabilir ve adım adım ilerleyerek sorunun kaynağını bulabilirsiniz. Örneğin, hava durumu uygulamanızda API'den veri gelmiyorsa, console.log(response) veya console.log(data) ile yanıtın ne olduğunu kontrol edebilirsiniz. Genellikle, en basit hatalar bile saatler süren araştırmalara neden olabilir. Bu yüzden, sistematik bir hata ayıklama yaklaşımı benimsemek önemlidir: hatayı izole et, tahminde bulun, dene, gözlemle ve tekrarlayarak sorunu çöz.

// JavaScript'te hata ayıklama için console.log kullanımı
async function getWeatherData(city) {
    console.log("Hava durumu verisi çekiliyor, şehir:", city); // İşlemin başladığını gösterir
    try {
        const response = await fetch(...);
        console.log("API yanıtı:", response); // API yanıtının durumunu kontrol et
        if (!response.ok) {
            console.error("API hatası:", response.status, response.statusText); // Hata detaylarını logla
            throw new Error('Şehir bulunamadı veya API hatası.');
        }
        const data = await response.json();
        console.log("Gelen veri:", data); // Gelen verinin yapısını kontrol et
        displayWeather(data);
    } catch (error) {
        console.error('Fonksiyon hatası:', error); // Genel bir hata yakalama
    }
}
    

Yardım Aramanın Önemi: Stack Overflow ve Mentorluk

Bir sorunla karşılaştığınızda, büyük olasılıkla daha önce başkaları da benzer bir sorunla karşılaşmıştır. Bu noktada Stack Overflow gibi geliştirici toplulukları paha biçilmez bir kaynaktır. Sorununuzu açık ve anlaşılır bir şekilde ifade ederek, ilgili etiketleri kullanarak arama yapmak, genellikle hızlı bir çözüm bulmanızı sağlar. Ancak, sadece kopyala-yapıştır yapmak yerine, bulunan çözümü anlamaya çalışmak ve kendi kodunuza uyarlamak esastır. HNG13 gibi programlarda mentorlarınız, size yol göstermek ve öğrenme sürecinizi hızlandırmak için oradadır. Bir sorunla karşılaştığınızda, ilk olarak kendiniz biraz araştırma yapın. Çözemediğinizde ise, sorununuzu net bir şekilde ifade ederek mentorunuzdan yardım isteyin. Ne denediğinizi, ne beklediğinizi ve ne ile karşılaştığınızı açıklamak, mentorunuzun size daha etkili bir şekilde yardımcı olmasını sağlar. Bu süreç, aynı zamanda problem çözme ve iletişim becerilerinizi de geliştirir. Ayrıca, program içindeki diğer katılımcılarla iletişim kurmak, ortak sorunları çözmek ve birbirinize destek olmak, hem motivasyonunuzu artırır hem de farklı bakış açıları kazanmanızı sağlar. Unutmayın, yazılım geliştirme bir takım sporudur ve yardım istemek zayıflık değil, akıllıca bir stratejidir.

Sürüm Kontrolü Hataları ve Geri Alma

Git kullanırken yanlış bir dosyayı commit etmek, yanlış branch'e merge yapmak veya istenmeyen değişiklikleri ana depoya göndermek gibi hatalar sıkça yaşanır. Ancak Git, bu tür hatalardan kurtulmak için güçlü araçlar sunar. Örneğin, son commit'inizi geri almak için git reset HEAD~1 veya git revert kullanabilirsiniz. Git geçmişini düzenlemek için git rebase gibi daha gelişmiş komutlar da mevcuttur. Önemli olan, bu komutları dikkatli kullanmak ve özellikle paylaşılan depolarda git push --force gibi komutlardan kaçınmaktır. Hatalarınızı geri alma yeteneği, yazılım geliştirme sürecinde size büyük bir güvenlik ağı sağlar ve denemekten korkmamanızı teşvik eder. HNG13 boyunca, Git komutlarına hâkim olmak, hem kendi projelerinizde hem de ekip projelerinde size büyük fayda sağlayacaktır. Yanlışlıkla yapılan bir değişikliği geri alabilmek, potansiyel saatler süren manuel düzeltme çabalarından sizi kurtarabilir.

Performans ve Optimizasyon: Mobil Uyumlu ve Hızlı Uygulamalar Nasıl Geliştirilir?

Günümüz dijital dünyasında, kullanıcıların web siteleri ve uygulamalardan beklentileri sadece işlevsellikle sınırlı değildir. Hızlı yüklenen, tüm cihazlarda sorunsuz çalışan ve kullanıcı deneyimini ön planda tutan çözümler artık bir lüks değil, bir gerekliliktir. HNG13 gibi programlarda öğrendiğiniz temel bilgilerin ötesine geçerek, uygulamalarınızı performanslı ve mobil uyumlu hale getirmek, sizi diğer geliştiricilerden ayıracak önemli bir beceridir. Bu bölümde, web uygulamalarınızı daha hızlı ve daha erişilebilir kılmak için kullanabileceğiniz bazı kritik yöntemleri ve stratejileri inceleyeceğiz.

Mobil Duyarlı Tasarım (Responsive Design) Nedir ve Nasıl Uygulanır?

Mobil cihazların internet trafiğindeki payının artmasıyla birlikte, web uygulamalarının farklı ekran boyutlarına ve çözünürlüklerine uyum sağlayabilmesi hayati bir öneme sahip olmuştur. Mobil duyarlı tasarım (responsive design), tek bir kod tabanı kullanarak uygulamanızın masaüstü, tablet ve mobil cihazlarda en iyi kullanıcı deneyimini sunmasını sağlayan yaklaşımdır. Bu, genellikle üç ana bileşenle başarılır: esnek ızgaralar (fluid grids), esnek görseller (flexible images) ve medya sorguları (media queries).

Esnek Izgaralar ve Görseller: CSS ile elementlerinizin genişliğini yüzde (%) bazında veya vw (viewport width) gibi göreceli birimlerle tanımlayarak, ekran boyutuna göre otomatik olarak ölçeklenmelerini sağlayabilirsiniz. Aynı şekilde, görsellerin max-width: 100%; height: auto; gibi özelliklerle boyutlandırılması, görsellerin kapsayıcılarının dışına taşmasını engeller ve ekran boyutuna göre doğru oranda küçülmesini sağlar. Bu, içeriğinizin farklı cihazlarda bozulmadan görünmesini garantiler.

Medya Sorguları (Media Queries): Medya sorguları, belirli ekran boyutları, çözünürlükler veya cihaz yönelimleri gibi koşullara bağlı olarak farklı CSS kurallarını uygulamanızı sağlayan CSS özellikleridir. Örneğin, mobil cihazlar için farklı bir navigasyon menüsü veya daha küçük font boyutları belirleyebilirsiniz. Bu sayede, farklı cihazlarda farklı stil kuralları uygulayarak kullanıcıya özel bir deneyim sunulur.

/* style.css içinde bir media query örneği */
.container {
    width: 90%; /* Varsayılan genişlik */
    margin: 0 auto;
    padding: 20px;
}

/* 768px genişliğinden küçük ekranlar için (tablet ve mobil) */
@media screen and (max-width: 768px) {
    .container {
        width: 95%; /* Daha dar ekranlarda biraz daha geniş */
        padding: 15px;
    }
    h1 {
        font-size: 24px;
    }
    button {
        display: block; /* Butonu tam genişlik yap */
        width: 100%;
        margin-top: 10px;
    }
}

/* 480px genişliğinden küçük ekranlar için (sadece mobil) */
@media screen and (max-width: 480px) {
    .container {
        padding: 10px;
    }
    h1 {
        font-size: 20px;
    }
    input[type="text"] {
        font-size: 14px;
    }
}
    

Yukarıdaki örnekte, max-width kullanılarak belirli bir piksel değerinin altındaki ekranlar için farklı CSS kuralları tanımlanmıştır. Bu sayede, uygulamanız masaüstü bilgisayarlarda geniş bir düzenle görünürken, mobil cihazlarda daha kompakt ve okunaklı bir yapıya bürünür. Mobil uyumluluk, sadece estetik bir kaygı değil, aynı zamanda SEO (Arama Motoru Optimizasyonu) için de kritik bir faktördür; arama motorları mobil uyumlu siteleri daha üst sıralara taşır.

Uygulama Performansını Artırma İpuçları

Bir uygulamanın hızlı yüklenmesi ve akıcı çalışması, kullanıcı memnuniyeti için hayati öneme sahiptir. Performans optimizasyonu, genellikle çoklu adımlar içeren kapsamlı bir süreçtir:

• Görsel Optimizasyonu: Büyük boyutlu görseller, web sayfalarının yavaş yüklenmesinin en yaygın nedenlerinden biridir. Görselleri sıkıştırın, doğru formatı kullanın (JPEG, PNG, WebP) ve modern loading="lazy" özelliğini kullanarak sadece ekranda görünen görselleri yükleyin.
• Kod Optimizasyonu (Minification ve Bundling): JavaScript ve CSS dosyalarınızı "minify" ederek (boşlukları, yorumları ve gereksiz karakterleri kaldırarak) boyutlarını küçültün. Birden fazla JS veya CSS dosyasını tek bir dosyada birleştirerek (bundling), tarayıcının daha az HTTP isteği yapmasını sağlayın. Webpack veya Rollup gibi araçlar bu konuda size yardımcı olabilir.
• Tarayıcı Önbellekleme (Browser Caching): Tarayıcıların statik varlıkları (CSS, JS, resimler) yerel olarak önbelleğe almasını sağlayarak, tekrarlayan ziyaretlerde sayfa yükleme sürelerini önemli ölçüde azaltabilirsiniz. HTTP başlıklarını (Cache-Control) doğru şekilde yapılandırarak bunu yönetebilirsiniz.
• Asenkron Yükleme: Kritik olmayan JavaScript dosyalarını async veya defer nitelikleriyle yükleyerek, bu dosyaların ana HTML ayrıştırma sürecini engellemesini önleyin. Bu, sayfanın daha hızlı etkileşimli hale gelmesini sağlar.
• Sunucu Tarafı Optimizasyonlar: Eğer bir backend uygulamanız varsa, veritabanı sorgularını optimize etmek, önbellekleme kullanmak ve sunucu yanıt sürelerini iyileştirmek genel performansı artıracaktır.

Vaka Analizi: Yavaş Yüklenen Bir E-ticaret Sitesinin Optimizasyonu

Bir HNG13 projesinde, ürün görselleri bol olan ve mobil cihazlarda yavaş yüklenen bir e-ticaret sitesi geliştirdiğinizi varsayalım. İlk incelemede, her ürün sayfasında 2MB boyutunda yüksek çözünürlüklü görseller kullanıldığı ve tüm CSS ile JavaScript dosyalarının ayrı ayrı yüklendiği tespit edildi. Çözüm olarak:

1. Tüm ürün görselleri WebP formatına dönüştürüldü ve çözünürlükleri optimize edildi. Her görselin boyutu ortalama 200KB'a düşürüldü.
2. Görseller için loading="lazy" eklendi, böylece kullanıcı sayfayı aşağı kaydırdıkça görseller yüklendi.
3. Tüm CSS ve JavaScript dosyaları Webpack ile tek bir bundle.css ve bundle.js dosyasında birleştirildi ve minify edildi.
4. Kritik olmayan JavaScript dosyalarına defer niteliği eklendi.
5. Sonuç olarak, sitenin mobil cihazlardaki ilk yükleme süresi 8 saniyeden 2.5 saniyeye düştü, bu da kullanıcı deneyimini önemli ölçüde iyileştirdi ve hemen çıkma oranını azalttı.

Bu tür optimizasyonlar, HNG13 sürecinde sizi sadece kod yazan birinden, aynı zamanda uygulamalarının kalitesini düşünen bir geliştiriciye dönüştürecektir. Performans ve mobil uyumluluk, günümüz web geliştirmenin temel direkleridir ve bu konularda yetkin olmak, kariyeriniz için büyük bir avantaj sağlar.

HNG13 Sonrası Kariyeriniz İçin Geleceğe Yönelik Adımlar Neler Olmalı?

HNG13 gibi yoğun ve öğretici bir programı tamamlamak, yazılım geliştirme kariyerinizde önemli bir dönüm noktasıdır. Bu süreçte edindiğiniz bilgi ve deneyimler, size sağlam bir temel sunar. Ancak yazılım dünyası sürekli evrildiği için, HNG13 sonrası atacağınız adımlar, kariyerinizin geleceği için büyük önem taşır. Bu bölüm, programı tamamladıktan sonra kendinizi nasıl daha da geliştirebileceğiniz, edindiğiniz becerileri nasıl sergileyebileceğiniz ve yazılım sektöründe kendinize nasıl bir yer edinebileceğiniz üzerine stratejiler sunacaktır.

Portföy Oluşturmanın ve Projelerinizi Sergilemenin Önemi

İş arayışına girdiğinizde veya freelance projeler üstlenmek istediğinizde, potansiyel işverenlere gösterebileceğiniz somut çıktılar olması kritik öneme sahiptir. HNG13 sırasında tamamladığınız projeler, bu çıktılar için harika bir başlangıç noktasıdır. Bu projeleri GitHub gibi platformlarda düzenli ve açıklayıcı bir şekilde yayınlayın. Her projenin bir README dosyası içermesine özen gösterin; bu dosyada projenin ne yaptığı, hangi teknolojilerin kullanıldığı, nasıl kurulup çalıştırılacağı ve projenin hangi sorunları çözdüğü açıkça belirtilmelidir. Ayrıca, bu projeleri bir kişisel web sitesi veya portföy sitesi aracılığıyla sergilemeniz, profesyonel imajınızı güçlendirecektir. Portföy sitenizde, projelerin canlı demolarına bağlantılar ekleyin ve her projenin geliştirme sürecinden, karşılaştığınız zorluklardan ve elde ettiğiniz çözümlerden bahsedin. Bu, sadece teknik becerilerinizi değil, aynı zamanda problem çözme yeteneğinizi ve düşünce yapınızı da ortaya koyar. Bir portföy, binlerce kelimeden daha fazlasını anlatır ve potansiyel işverenlere yeteneklerinizi doğrudan göstermenin en etkili yoludur.

Sürekli Öğrenme ve Gelişime Açık Olma

Yazılım dünyası, teknolojilerin hızla geliştiği, yeni kütüphanelerin ve framework'lerin ortaya çıktığı dinamik bir alandır. HNG13'te edindiğiniz bilgiler değerli olsa da, sektörde kalıcı olmak ve rekabetçi kalabilmek için sürekli öğrenme ve kendinizi geliştirmeye açık olmanız şarttır. Bu, aşağıdaki yollarla sağlanabilir:

• Yeni Teknolojileri Takip Etme: Sektördeki trendleri, yeni çıkan dilleri, kütüphaneleri ve framework'leri takip edin. Örneğin, React, Vue veya Angular gibi popüler frontend framework'lerini veya Node.js, Python/Django gibi backend teknolojilerini derinlemesine öğrenmeyi düşünebilirsiniz.
• Online Kurslar ve Kaynaklar: Udemy, Coursera, freeCodeCamp gibi platformlardaki ileri düzey kurslarla bilgi birikiminizi artırın. Yazılım bloglarını, teknik makaleleri ve YouTube kanallarını düzenli olarak takip edin.
• Açık Kaynak Projelere Katılma: GitHub'daki açık kaynak projelere katkıda bulunmak, gerçek dünya kod tabanlarıyla çalışma deneyimi kazanmanızı ve diğer geliştiricilerle etkileşimde bulunmanızı sağlar. Bu, aynı zamanda Git ve ekip çalışması becerilerinizi pekiştirmenin harika bir yoludur.
• Mentorluk ve Topluluk Etkinlikleri: Daha deneyimli geliştiricilerden mentorluk almaya devam edin ve yerel yazılım topluluklarına veya online forumlara katılarak bilgi alışverişinde bulunun. Konferanslara, hackathonlara ve meet-up'lara katılmak, hem yeni şeyler öğrenmenizi hem de ağ kurmanızı sağlar.

Unutmayın, yazılım geliştirme bir maratondur, sprint değil. Kendinize yatırım yapmaya devam etmek, uzun vadeli başarı için en önemli adımdır. HNG13 size kapıyı araladı; şimdi bu kapıdan geçip kendi yolunuzu çizme zamanı.

Sonuç: HNG13 Serüveninizden Çıkarılacak Dersler ve Sıkça Sorulan Sorular

HNG13 programı, yazılım geliştirme yolculuğunuzun sadece başlangıcı olabilir, ancak sunduğu deneyim ve bilgi birikimi, kariyerinizin temelini oluşturacak kadar değerlidir. Bu süreç boyunca sadece teknik beceriler kazanmakla kalmadınız, aynı zamanda problem çözme yeteneğinizi, ekip içinde çalışma becerilerinizi ve kendinize olan güveninizi de geliştirdiniz. HTML, CSS, JavaScript gibi web'in temel dillerine hakim oldunuz, Git ve GitHub ile sürüm kontrolünün önemini kavradınız, hata ayıklamanın inceliklerini öğrendiniz ve hatta uygulamalarınızı mobil uyumlu ve performanslı hale getirme stratejilerini keşfettiniz. Unutmayın ki yazılım dünyasında öğrenme asla bitmez. HNG13'ten elde ettiğiniz momentumu sürdürmek, sürekli olarak yeni bilgiler edinmek ve edindiğiniz bu bilgileri gerçek dünya projelerinde uygulamak, sizi başarılı bir geliştirici yapacaktır. Bu yolculukta attığınız her adım, sizi daha yetkin ve daha donanımlı kılacaktır.

Sıkça Sorulan Sorular (SSS)