Colour Vocab

Laman kad imbas satu halaman untuk belajar warna dalam bahasa Sepanyol, dibina dengan HTML dan CSS sahaja.

Kosa kata

Sepanyol	English	Dansk	Bahasa Malaysia
Rojo	red	rød	merah
Azul	blue	blå	biru
Anaranjado	orange	orange	oren
Verde	green	grøn	hijau
Amarillo	yellow	gul	kuning

Buka src/index.html dalam mana-mana pelayar. Tiada apa-apa untuk dipasang.

index.html memaut helaian gaya luaran, style.css. Peraturan latihan ini ialah semua perubahan dibuat dalam CSS dan tiada dalam HTML.

Pautkan helaian gaya. <link rel="stylesheet" href="./style.css" />. Untuk menguji pautan, tetapkan sementara body { background-color: pink; } dan semak bahawa halaman berubah.
Warnakan setiap tajuk mengikut maksudnya. Setiap tajuk mempunyai id (red, blue, orange, green, yellow), jadi #red { color: red; } hanya menggayakan Rojo. id ialah petunjuk jika anda tidak tahu perkataan Sepanyolnya.
Jadikan tajuk berat biasa. Semua tajuk berkongsi kelas color-title, jadi satu peraturan meliputi semuanya: .color-title { font-weight: normal; }.
Saiz imej. img { height: 200px; width: 200px; } menjadikan setiap petak warna sama saiz.

Pratonton selepas setiap langkah supaya kesilapan dikesan semasa masih kecil.

yellow biasa sukar dibaca pada latar putih, jadi Amarillo menggunakan #d4a900.

Tangkapan skrin diambil dengan Chrome headless dalam tetingkap lebar 480 px:

chrome --headless=new --hide-scrollbars --window-size=480,1490 \
  --screenshot=docs/wiki/images/colour-vocab.png file:///laluan/ke/src/index.html

Colour Vocab