Web geliştirmeye başlamak isteyen herkesin ilk duyduğu şey HTML, CSS ve JavaScript üçlüsüdür — ama bu üçünün gerçekte ne iş yaptığını gören çok azdır. Bu yazıda, hiç kod yazmamış birinin bakış açısıyla, sıfırdan çalışan bir web sayfası inşa ediyoruz: bir başlık, bir buton ve sayfayı canlandıran bir sayaç.
HTML sayfada ne olacağını söyler. Her şey bir etiketle başlar, o etiketle biter:
<h1>Merhaba Web</h1>
<button id="btn">Tıkla</button>
<p id="out">0 tık</p>Bu üç satır sayfaya bir başlık, bir buton ve bir sonuç paragrafı ekler. Henüz gri ve sıkıcı — çünkü görünüm onu değil.
CSS'te önce kime konuştuğunu söylersin, sonra özellik-değer ikilileriyle istediğini belirtirsin:
button {
background: #22c55e;
color: white;
padding: 12px 28px;
border-radius: 10px;
cursor: pointer;
}Yeşil zemin, beyaz yazı, yuvarlak köşeler ve imleç üstüne gelince el işareti. Düzeni ortalayan text-align: center ve geçişleri yumuşatan transition ile sayfa bir anda modern bir görünüme kavuşur.
HTML ne olacağını, CSS nasıl görüneceğini söyledi; JavaScript ise ne yapacağını. Butonu querySelector ile yakalar, addEventListener ile tıklamaları dinleriz:
btn.addEventListener('click', () => {
n++;
out.textContent = n + ' tık';
});Bu noktadan sonra sayfa seninle konuşur: her tıklamada sayaç artar, Sıfırla butonu ile istediğin an temizlersin.
Web öğrenmenin en keyifli yanı kod ile sonuç arasındaki anlık köprüdür. Bir rengi değiştir, çalıştır, gör. Bozuldu mu? Geri al. Bu hızlı deneme döngüsü kod öğrenmesini ezber değil, deney hâline getirir.
Bu çerçeve kafanda yer ettikten sonra hiçbir web sayfası karmaşık gelmez — hepsi aynı üç katmanın farklı kombinasyonlarıdır. Bu yazıya eşlik eden videoda her adımı canlı olarak, kod yazıldıkça tarayıcıda gerçekleşirken izleyebilirsin.
Test başlık Günümüzde dijital dönüşümün hız kazanmasıyla birlikte yazılım çözümlerinin iş süreçlerin...
Devamını oku →
Excel'de Pivot Tablo Raporunu Tek Tıkla Filtrelemek İster Misin? Dilimleyici videosunda butonlarla f...
Devamını oku →
Dijital pazarlamacılar, SEO uzmanları ve veri analistleri için Google Analytics, web sitelerinin per...
Devamını oku →