Yazılım Öğrenme Rehberi 6, HTML, CSS ve JavaScript’i bir arada kullanarak web projeleri geliştirmeye odaklanır. Bu yazıda, önceki rehberlerde öğrendiğiniz bilgileri kullanarak, etkileşimli ve şık web sayfaları oluşturmayı öğreneceksiniz. HTML, CSS ve JavaScript’in birlikte nasıl çalıştığını keşfedeceğiz.
Giriş
Önceki yazılarda, HTML ve CSS’in temellerini, JavaScript’in nasıl kullanıldığını öğrendik. Bu bilgiler, web geliştirme sürecinde karşılaşacağınız birçok problemin çözümünde size yardımcı olacaktır. Şimdi, HTML, CSS ve JavaScript’i bir arada kullanarak etkileşimli web sayfaları oluşturacağız. Bu rehberde, bu üç temel teknolojiyi kullanarak basit bir proje geliştireceğiz.
HTML, CSS ve JavaScript’i Bir Arada Kullanma
HTML, CSS ve JavaScript’in birlikte nasıl çalıştığını anlamak için bir projeye başlayalım. Bu projede, kullanıcıların görev ekleyip çıkarabileceği basit bir yapılacaklar listesi (to-do list) oluşturacağız.
Proje: Basit Yapılacaklar Listesi
Bu projede, HTML ile yapının temelini oluşturacağız, CSS ile stil vereceğiz ve JavaScript ile etkileşimli hale getireceğiz. Projeyi adım adım oluşturacağız.
Adım 1: HTML Yapısı
İlk olarak, HTML yapısını oluşturacağız. Bu yapıda, başlık, metin girişi, düğme ve yapılacaklar listesini içeren bir yapı olacak.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Basit Yapılacaklar Listesi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Yapılacaklar Listesi</h1>
<input type="text" id="taskInput" placeholder="Yeni görev ekle...">
<button onclick="addTask()">Ekle</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Bu HTML yapısı, başlık, metin girişi, düğme ve görev listesini içeren temel bir yapı sağlar.
Adım 2: CSS ile Stil Verme
HTML yapımızı oluşturduktan sonra, CSS ile stil vereceğiz. Bu, sayfanın daha şık ve kullanıcı dostu görünmesini sağlar.
style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
color: #333;
text-align: center;
}
input {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f3f3f3;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: gray;
}
.delete {
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 5px;
}
.delete:hover {
background-color: #c82333;
}
Bu CSS, sayfanın görünümünü iyileştirir ve kullanıcı dostu hale getirir. Container merkezi olarak hizalanmış, görevler arka plan rengi ve kenarlıkları ile belirginleştirilmiştir.
Adım 3: JavaScript ile Etkileşim Ekleme
Son olarak, JavaScript kullanarak görev ekleme, tamamlama ve silme işlemlerini gerçekleştireceğiz.
script.js
// Görev eklemek için fonksiyon
function addTask() {
let taskInput = document.getElementById('taskInput');
let taskList = document.getElementById('taskList');
let taskText = taskInput.value;
if (taskText === '') {
alert('Lütfen bir görev girin.');
return;
}
let li = document.createElement('li');
li.appendChild(document.createTextNode(taskText));
let deleteButton = document.createElement('button');
deleteButton.appendChild(document.createTextNode('Sil'));
deleteButton.className = 'delete';
deleteButton.onclick = function() {
taskList.removeChild(li);
}
li.appendChild(deleteButton);
li.onclick = function() {
li.classList.toggle('completed');
}
taskList.appendChild(li);
taskInput.value = '';
}
Bu JavaScript kodu, görev ekleme, tamamlama ve silme işlemlerini gerçekleştiren fonksiyonlar içerir. Görev eklendiğinde, yeni bir <li> öğesi oluşturulur, tamamlandığında completed sınıfı eklenir ve silindiğinde listeden kaldırılır.
HTML, CSS ve JavaScript’in Birleşimi
Bu projede, HTML, CSS ve JavaScript’in birlikte nasıl çalıştığını gördük. HTML sayfanın yapısını, CSS sayfanın görünümünü ve JavaScript sayfanın etkileşimini sağlar. Bu üç teknoloji birlikte kullanılarak etkili ve kullanıcı dostu web sayfaları oluşturulabilir.
Yazılım Geliştirme Sürecinde Dikkat Edilmesi Gerekenler
Yazılım geliştirme sürecinde dikkat etmeniz gereken bazı önemli noktalar şunlardır:
Sürekli İyileştirme ve Öğrenme
Yazılım dünyası sürekli değişen ve gelişen bir alandır. Yeni teknolojileri, araçları ve yöntemleri takip etmek için sürekli öğrenme alışkanlığı edinmek önemlidir. Bloglar, podcast’ler ve konferanslar bu konuda faydalı kaynaklar olabilir.
İşbirliği ve Katkı
Açık kaynak projelere katkıda bulunmak, topluluk içinde işbirliği yapmak ve ekip projelerinde yer almak, yazılım öğrenme sürecinizi hızlandırır ve geliştirici olarak büyümenizi sağlar.
Geri Bildirim ve Test
Kodunuzu düzenli olarak test etmek ve geri bildirim almak, yazılım geliştirme sürecinde önemli bir yer tutar. Birim testleri, entegrasyon testleri ve kullanıcı geri bildirimi, kodunuzun kalitesini artırmanıza yardımcı olur.
Sonuç
HTML, CSS ve JavaScript, modern web geliştirme için temel teknolojilerdir. Bu rehberde, bu üç teknolojiyi bir arada kullanarak basit bir yapılacaklar listesi uygulaması oluşturduk. Bir sonraki rehberde, daha ileri düzey projeler ve teknikler keşfedeceğiz. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu bilgileri kullanarak yolculuğunuza başlayabilirsiniz. Yazının devamı için burayı inceleyebilirsiniz.
Yararlandığım Kaynaklar
- HTML5 Standard
- MDN Web Docs – HTML
- MDN Web Docs – CSS
- MDN Web Docs – JavaScript
- W3Schools – HTML
- W3Schools – CSS
- W3Schools – JavaScript
- Coursera
- Udemy
- edX
- freeCodeCamp
- “Clean Code” – Robert C. Martin
- “The Pragmatic Programmer” – Andrew Hunt ve David Thomas
- “You Don’t Know JS” – Kyle Simpson
- Stack Overflow
- GitHub
Bu kaynaklardan yararlanarak yazılım öğrenme sürecinizi daha verimli ve etkili hale getirebilirsiniz. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu rehberi ve kaynakları kullanarak yolculuğunuza başlayabilirsiniz.
[…] CSS, web sayfalarının görünümünü ve düzenini belirleyen temel bir stil dilidir. HTML ile birlikte kullanıldığında, web sayfalarınızı daha çekici ve kullanıcı dostu hale getirir. Bu rehberde, CSS’in temel yapı taşlarını ve HTML ile nasıl birlikte kullanıldığını öğrendik. Bir sonraki rehberde, HTML, CSS ve JavaScript’i birleştirerek basit bir uygulama oluşturacağız. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu bilgileri kullanarak yolculuğunuza başlayabilirsiniz. Yazının devamı için burayı inceleyebilirsiniz. […]