Proje: Dashboard widget

5 derslik projenin genel bakışı: şablonlu bir widget iskeleti.

Proje: Dashboard widget

Bu 5 derslik projede bir satış paneli widget'ı yapacaksın. Her derste widget'a bir parça ekleyecek, son derste tam bir panel elinde olacak.

Projede şunları kullanacaksın:

Anlamsal etiketler: section, header, main, article
Veri yapıları: table, figure, figcaption
Yeniden kullanılabilir parça: template, slot
Yedek ve kancalar: noscript, data-* öznitelikleri

Hazırsan başlayalım.

Widget nedir?

Widget, tek başına duran küçük bir veri panelidir. Bir satış paneli widget'ı tek bakışta aylık ciroyu, üst ürünleri ve canlı durumu gösterir.

HTML'de widget'ı bir <section> ile sarıp içine <header>, <main> ve <article> koyarız. Böylece ekran okuyucu paneli tek bir bölge olarak duyurur.

Veriyi tablo ve figure ile yapılandırırız; okuyucu hem rakamları hem görseli kolayca algılar.

Uygulama Boş belge iskeletiyle başla

Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde DOCTYPE, <html>, <head>, boş <body> bulunsun. lang, meta ve başlıkları sonraki derslerde ekleyeceğiz.

Örnek çözümü göster

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Kendini test et

Bir widget hangi özellikleri taşımalı?
- Kendi kendine yeten, tek bakışta okunan küçük bir panel
- Tüm sayfayı kaplayan tek bir büyük görsel
- Yalnızca JavaScript kodu içeren betik bloğu
- Başka sayfalara bağlantı veren menü
Cevabı göster

Kendi kendine yeten, tek bakışta okunan küçük bir panel — Doğru! Widget tek bakışta okunan, kendi kendine yeten küçük bir paneldir.

Widget kabının başlığını tamamla

<section>
  <header>
    <h1>____</h1>
  </header>
</section>

Cevabı göster

<section>
  <header>
    <h1>Satış Paneli</h1>
  </header>
</section>

Kavramları anlamlarıyla eşleştir

widget

Kendi kendine yeten veri paneli
section

İçerik bölümü
article

Bağımsız içerik birimi
header

Bölüm başlığı grubu
template

Yeniden kullanılabilir iskelet

Sıradaki ders: Widget iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler