5 Saatte Tamamlanan Basit Web Uygulaması: HTML, CSS ve JS Projesi
Projeyle Öğrenme
5 Saatte Tamamlanan Basit Web Uygulaması: HTML, CSS ve JS Projesi
5 Saatte Tamamlanan Basit Web Uygulaması: HTML, CSS ve JS Projesi
Bu rehber, projeyle öğrenme yaklaşımını kullanarak kısa sürede çalışır bir web uygulaması üretmek isteyenler için hazırlandı. Örnek proje: basit bir Görev Listesi (To‑Do) uygulaması. Adım adım plan, kod örnekleri ve dağıtım rehberiyle 5 saat içinde çalışır hale getirebileceğiniz bir yol haritası sunuyorum. Bazı kurs ve kaynaklar benzer kısa projeler sunduğu için ilham alabilirsiniz (örnek kurslar: Udemy: 15 Web Projesi, Udemy: 30 Günde 30 Proje).
Ne Öğreneceksiniz?
- HTML ile içerik ve form elemanları oluşturma
- CSS ile temel düzen, responsive tasarım ve küçük animasyonlar
- JavaScript ile DOM manipülasyonu, olay yönetimi ve localStorage kullanımı
- Basit test, hata ayıklama ve GitHub Pages ile dağıtım
Ön Gereksinimler
- Temel HTML/CSS/JavaScript bilgisi (değilse başlangıç kaynakları için: Bitdegree HTML Dersleri)
- Kod editörü (ör. Visual Studio Code)
- Modern web tarayıcısı (Chrome, Firefox, Edge)
Proje Özeti: Basit Görev Listesi
Uygulama şu temel özelliklere sahip olacak:
- Yeni görev ekleme
- Görevi tamamlandı olarak işaretleme (tıklamayla)
- Görev silme
- Görevlerin localStorage ile tarayıcıda saklanması
- Basit, mobil uyumlu arayüz
5 Saatlik Zaman Çizelgesi (Öneri)
- 00:00–00:30 — Ortam kurulum: proje klasörü, VS Code, Live Server eklentisi
- 00:30–01:30 — HTML iskeleti ve temel markup
- 01:30–02:30 — CSS tasarım: layout, responsive kurallar
- 02:30–04:00 — JavaScript: görev ekleme, silme, tamamlandı, localStorage
- 04:00–04:30 — Test, hata düzeltme, küçük iyileştirmeler
- 04:30–05:00 — Dağıtım: GitHub Pages veya basit hosting ile yayına alma
Bu zaman çizelgesi öneridir; deneyiminize ve projenin genişletilmesine göre değişebilir.
Adım Adım Uygulama
1) Proje Klasörü ve index.html
Önce bir klasör oluşturun, içine index.html, styles.css ve app.js dosyalarını ekleyin. Aşağıda temel HTML iskeletinin kısa bir örneği var (tarayıcıya yapıştırılabilecek şekilde):
<!doctype html> Yukarıdaki yapıda: Basit bir görünüm için örnek CSS (küçük bir parça): <style> Aşağıdaki örnek, temel işlevselliği sağlar: const input = document.getElementById('task-input'); Bu kod parçası, uygulamanın temel döngüsünü kurar. Daha gelişmiş hata denetimleri ve form doğrulamaları ekleyerek güvenilirliği artırabilirsiniz. Bu rehber kısa bir projeyi hedefler; daha karmaşık uygulamalar için ek konular (veritabanı, kimlik doğrulama, testler) gerekecektir. Ayrıca kurs içerikleri zamanla güncellenebilir; kaynaklardaki ders güncellemelerini kontrol etmeniz faydalı olacaktır. Projeyi tamamladığınızda kodunuzu paylaşmak, geri bildirim almak ve farklı yaklaşımları incelemek öğrenmenizi hızlandırır. Bu kılavuz, projeyle öğrenme metodolojisini adım adım pratiğe dökmeniz için hazırlanmıştır.
<html lang=\"tr\">
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">
<title>Görev Listesi</title>
<link rel=\"stylesheet\" href=\"styles.css\">
</head>
<body>
<div class=\"app\">
<h1>Görev Listesi</h1>
<input id=\"task-input\" placeholder=\"Yeni görev...\" />
<button id=\"add-btn\">Ekle</button>
<ul id=\"task-list\"></ul>
</div>
<script src=\"app.js\"></script>2) HTML Markup Açıklaması
3) CSS Temelleri (styles.css)
.app { max-width: 600px; margin: 40px auto; padding: 16px; font-family: Arial, sans-serif; }
#task-list { list-style: none; padding: 0; }
#task-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.done { text-decoration: line-through; color: #777; }
#task-input { width: 70%; padding: 8px; }
#add-btn { padding: 8px 12px; }
@media (max-width:480px){ .app{margin:20px} #task-input{width:60%} }
</style>4) JavaScript: Görev Ekleme, Silme, Tamamlandı ve localStorage (app.js)
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('task-list');
function getTasks() { return JSON.parse(localStorage.getItem('tasks') || '[]'); }
function saveTasks(tasks) { localStorage.setItem('tasks', JSON.stringify(tasks)); }
function render() {
const tasks = getTasks();
list.innerHTML = '';
tasks.forEach((t, i) => {
const li = document.createElement('li');
const span = document.createElement('span');
span.textContent = t.text;
if (t.done) span.classList.add('done');
const del = document.createElement('button');
del.textContent = 'Sil';
span.addEventListener('click', () => toggleDone(i));
del.addEventListener('click', () => removeTask(i));
li.appendChild(span); li.appendChild(del); list.appendChild(li);
});
}
function addTask(text) { if (!text.trim()) return; const tasks = getTasks(); tasks.push({ text: text.trim(), done: false }); saveTasks(tasks); render(); }
function toggleDone(index) { const tasks = getTasks(); tasks[index].done = !tasks[index].done; saveTasks(tasks); render(); }
function removeTask(index) { const tasks = getTasks(); tasks.splice(index, 1); saveTasks(tasks); render(); }
addBtn.addEventListener('click', () => { addTask(input.value); input.value = ''; });
window.addEventListener('load', render);5) Test ve Dağıtım
Genişletme Fikirleri (Saatler sonrasında)
Kaynaklar ve Referanslar
Sınırlamalar ve Tavsiyeler