- Katılım
- 30 Nisan 2025
- Mesajlar
- 46
- Tepkime puanı
- 26
- Puanları
- 18
Merhaba Çaylak Forum ailesi!
Bu konuda, 7 günde temel web geliştirme (HTML, CSS, JavaScript) kavramlarını öğrenip, hafta sonunda mini bir “Yapılacaklar (To-Do) Uygulaması” geliştireceğiz. Her gün kısa hedefler, mini ödev ve kontrol listesi var. Takılırsan bu başlığa yaz – birlikte çözelim.
Bu başlık altında kendi ekran görüntünü, kodunu veya takıldığın yeri paylaş. İsteyenlerin kodunu birlikte “refactor” edelim. En iyi 3 To-Do tasarımını haftaya öne çıkaralım. 
Bu konuda, 7 günde temel web geliştirme (HTML, CSS, JavaScript) kavramlarını öğrenip, hafta sonunda mini bir “Yapılacaklar (To-Do) Uygulaması” geliştireceğiz. Her gün kısa hedefler, mini ödev ve kontrol listesi var. Takılırsan bu başlığa yaz – birlikte çözelim.
Hedefler
[] HTML ile anlamlı, semantik bir iskelet kurmak
[] CSS ile modern, responsive bir arayüz yapmak (flex / grid)
[] JavaScript ile etkileşim, DOM, temel olay yönetimi
[] Basit ama gerçek bir proje: To-Do uygulaması (yerel saklama ile)
Program (7 Gün)
Gün 1 – Temeller & Ortam Kurulumu
[] VS Code kur, “Live Server” eklentisini ekle.
[] Proje yapısı:index.html,style.css,app.js
[] Semantik etiketler:<header> <main> <section> <footer>
[] Ödev: Basit bir kişisel sayfa iskeleti oluştur.
Gün 2 – HTML Derinleşme
[] Formlar, listeler, linkler, görseller, meta etiketleri.
[] Erişilebilirlik (alt, label-for, heading hiyerarşisi).- Ödev: “Hakkımda + İletişim” bölümü olan tek sayfa.
Gün 3 – CSS Temelleri
[] Box model, display, margin/padding, typography.
[] Flexbox ile header/nav/section hizalama.- Ödev: Mobilde tek sütun, desktop’ta iki sütun layout.
Gün 4 – Modern CSS: Grid & Responsive
[] CSS Grid ile kart yapıları.
[] Media queries ile kırılma noktaları (375/768/1024).- Ödev: Kartlı bir “Blog” anasayfası grid düzeni.
Gün 5 – JavaScript Giriş
[] Değişkenler (let/const), diziler, fonksiyonlar.
[] DOM seçiciler, event listener, class ekleme/çıkarma.- Ödev: Butona tıklayınca listeye öğe ekleyen mini demo.
Gün 6 – Proje: To-Do Uygulaması (Bölüm 1)
[] HTML iskelet: input + “Ekle” butonu + liste.
[] JS: öğe ekleme/çıkarma/tamamlama (toggle).- Ödev: Tamamlananlara üstü çizili stil ekle.
Gün 7 – Proje: To-Do Uygulaması (Bölüm 2)
[]localStorageile kalıcılık.
[] Filtreler: “Tümü / Aktif / Tamamlanan”.- Ödev: Basit bir boş-durum (empty state) mesajı ekle.
Hızlı Kod Parçaları
HTML iskelet
HTML:
<!doctype html> <html lang="tr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>To-Do Uygulamam</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header><h1>Yapılacaklar</h1></header> <main> <form id="todo-form"> <input id="todo-input" type="text" placeholder="Görev ekle..." required /> <button type="submit">Ekle</button> </form> <div class="filters"> <button data-filter="all">Tümü</button> <button data-filter="active">Aktif</button> <button data-filter="completed">Tamamlanan</button> </div> <ul id="todo-list"></ul> <p id="empty">Henüz görev yok. Hadi bir tane ekleyelim!</p> </main> <script src="app.js"></script> </body> </html>CSS (özlü)
CSS:
*{box-sizing:border-box} body{max-width:720px;margin:0 auto;padding:16px;font-family:system-ui}
header h1{text-align:center}
form{display:flex;gap:8px;margin:12px 0}
#todo-input{flex:1;padding:10px;border:1px solid #ddd;border-radius:8px}
button{padding:10px 14px;border:0;border-radius:8px;cursor:pointer}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
#todo-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.todo{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid #eee;border-radius:8px}
.todo.done .text{text-decoration:line-through;opacity:.6}
#empty{display:none;text-align:center;color:#777;margin-top:16px}
@media (min-width:768px){body{padding:24px}}JavaScript (özlü)
JavaScript:
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
const empty = document.getElementById('empty');
const filters = document.querySelectorAll('.filters button');
let todos = JSON.parse(localStorage.getItem('todos') || '[]');
let currentFilter = 'all';
function save(){ localStorage.setItem('todos', JSON.stringify(todos)); }
function render(){
list.innerHTML = '';
const visible = todos.filter(t => currentFilter==='all' ? true : currentFilter==='active' ? !t.done : t.done);
visible.forEach((t,i)=>{
const li = document.createElement('li'); li.className = 'todo' + (t.done?' done':'');
li.innerHTML = <span class="text">${t.text}</span> <div> <button data-act="toggle" data-i="${i}">Tamamla</button> <button data-act="remove" data-i="${i}">Sil</button> </div>;
list.appendChild(li);
});
empty.style.display = todos.length ? 'none' : 'block';
}
form.addEventListener('submit', e=>{
e.preventDefault();
const text = input.value.trim();
if(!text) return;
todos.push({text, done:false});
input.value = '';
save(); render();
});
list.addEventListener('click', e=>{
const btn = e.target.closest('button'); if(!btn) return;
const i = +btn.dataset.i;
if(btn.dataset.act==='toggle') todos[i].done = !todos[i].done;
if(btn.dataset.act==='remove') todos.splice(i,1);
save(); render();
});
filters.forEach(b=> b.addEventListener('click', ()=>{ currentFilter = b.dataset.filter; render(); }));
render();
Kontrol Listesi
[] Semantik HTML kullandım.
[] Mobil-öncelikli responsive CSS var.
[] JS ile ekle / sil / tamamla çalışıyor.
[] GörevlerlocalStorageile kalıcı.- Boş-durum mesajı görünüyor.
Etkileşim
Bu başlık altında kendi ekran görüntünü, kodunu veya takıldığın yeri paylaş. İsteyenlerin kodunu birlikte “refactor” edelim. En iyi 3 To-Do tasarımını haftaya öne çıkaralım. 
