README.md

@@ -1,2 +1,42 @@
 # 043-web-colour-vocab
 
+A small flashcard website that teaches the colours in Spanish. Each card shows
+the Spanish word, coloured to match its meaning, above a swatch of that colour.
+Built with plain HTML and CSS for Udemy's *100 Days of Code*, lesson 5.4
+(Color Vocab Project).
+
+![The finished page: Rojo, Azul, Anaranjado, Verde and Amarillo, each above a 200px colour swatch](wiki/images/colour-vocab.png)
+
+## Vocabulary
+
+| Spanish | 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 |
+
+## Run it
+
+No build step and no dependencies. Open `index.html` in a browser.
+
+## Files
+
+| Path | Purpose |
+| --- | --- |
+| `index.html` | The page. Given by the exercise and left unchanged. |
+| `style.css` | All styling: 200px × 200px images, normal-weight titles, one text colour per colour word. |
+| `assets/images/` | The five colour swatches. |
+
+## Wiki
+
+Documentation in three languages lives in [`wiki/`](wiki/):
+
+- [English](wiki/Home.md)
+- [Dansk](wiki/Home-da.md)
+- [Bahasa Malaysia](wiki/Home-ms.md)
+
+## Licence
+
+See [LICENSE](LICENSE).

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Spanish Vocabulary</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <h1>Colors</h1>
+  <h2>Learn the colors in Spanish!</h2>
+  <h2 class="color-title" id="red">Rojo</h2>
+  <img class="color" src="./assets/images/red.png" alt="red" />
+
+  <h2 class="color-title" id="blue">Azul</h2>
+  <img src="./assets/images/blue.png" alt="blue" />
+
+  <h2 class="color-title" id="orange">Anaranjado</h2>
+  <img src="./assets/images/orange.png" alt="orange" />
+
+  <h2 class="color-title" id="green">Verde</h2>
+  <img src="./assets/images/green.png" alt="green" />
+
+  <h2 class="color-title" id="yellow">Amarillo</h2>
+  <img src="./assets/images/yellow.png" alt="yellow" />
+</body>
+
+</html>
+
+<!-- 
+TODOs
+IMPORTANT: You should not need to make ANY CHANGES to index.html
+All code should be written in your CSS file.
+
+1. Create a CSS file and incorporate it as an external stylesheet.
+2. Use CSS to style each of the color titles to meaning. 
+Hint: Use the id to help if you don't know the words in spanish.
+3. Use CSS to change all the color titles to have "font-weight: normal;"
+4. Use CSS (not HTML) to make all the images 200px heigh and 200px wide. 
+Hint: 
+https://developer.mozilla.org/en-US/docs/Web/CSS/height
+https://developer.mozilla.org/en-US/docs/Web/CSS/width
+-->

style.css

@@ -0,0 +1,29 @@
+img {
+  height: 200px;
+  width: 200px;
+}
+
+.color-title {
+  font-weight: normal;
+}
+
+#red {
+  color: red;
+}
+
+#blue {
+  color: blue;
+}
+
+#orange {
+  color: orange;
+}
+
+#green {
+  color: green;
+}
+
+/* Plain "yellow" is unreadable on white, so a darker yellow is used. */
+#yellow {
+  color: #d4a900;
+}

wiki/Home-da.md

@@ -0,0 +1,53 @@
+[English](Home) · **Dansk** · [Bahasa Malaysia](Home-ms)
+
+# Colour Vocab
+
+En flashcard-side til at lære farverne på spansk, lavet kun med HTML og CSS.
+
+![Den færdige side](images/colour-vocab.png)
+
+## Gloser
+
+| Spansk | 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 |
+
+## Sådan kører du den
+
+Åbn `index.html` i en vilkårlig browser. Der er intet at installere.
+
+## Sådan virker den
+
+`index.html` linker til et eksternt stylesheet, `style.css`. Opgavens regel er,
+at alle ændringer sker i CSS og ingen i HTML.
+
+1. **Link stylesheetet.** `<link rel="stylesheet" href="./style.css" />`.
+   Test linket ved midlertidigt at sætte `body { background-color: pink; }` og
+   se, at siden ændrer sig.
+2. **Farv hver titel efter dens betydning.** Hver titel har et `id` (`red`,
+   `blue`, `orange`, `green`, `yellow`), så `#red { color: red; }` rammer kun
+   *Rojo*. `id`'et er et hint, hvis du ikke kender det spanske ord.
+3. **Gør titlerne normale i vægt.** Alle titler har klassen `color-title`, så
+   én regel dækker dem: `.color-title { font-weight: normal; }`.
+4. **Størrelse på billederne.** `img { height: 200px; width: 200px; }` gør alle
+   farvefelter lige store.
+
+Se et preview efter hvert trin, så en fejl opdages, mens den er lille.
+
+### Bemærkning om gul
+
+Almindelig `yellow` er svær at læse på hvid baggrund, så *Amarillo* bruger
+`#d4a900`.
+
+## Skærmbillede
+
+Skærmbilledet er taget med headless Chrome i et 480 px bredt vindue:
+
+```bash
+chrome --headless=new --hide-scrollbars --window-size=480,1490 \
+  --screenshot=wiki/images/colour-vocab.png file:///sti/til/index.html
+```

wiki/Home-ms.md

@@ -0,0 +1,55 @@
+[English](Home) · [Dansk](Home-da) · **Bahasa Malaysia**
+
+# Colour Vocab
+
+Laman kad imbas satu halaman untuk belajar warna dalam bahasa Sepanyol,
+dibina dengan HTML dan CSS sahaja.
+
+![Halaman siap](images/colour-vocab.png)
+
+## 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 |
+
+## Cara menjalankan
+
+Buka `index.html` dalam mana-mana pelayar. Tiada apa-apa untuk dipasang.
+
+## Cara ia berfungsi
+
+`index.html` memaut helaian gaya luaran, `style.css`. Peraturan latihan ini
+ialah semua perubahan dibuat dalam CSS dan tiada dalam HTML.
+
+1. **Pautkan helaian gaya.** `<link rel="stylesheet" href="./style.css" />`.
+   Untuk menguji pautan, tetapkan sementara `body { background-color: pink; }`
+   dan semak bahawa halaman berubah.
+2. **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.
+3. **Jadikan tajuk berat biasa.** Semua tajuk berkongsi kelas `color-title`,
+   jadi satu peraturan meliputi semuanya: `.color-title { font-weight: normal; }`.
+4. **Saiz imej.** `img { height: 200px; width: 200px; }` menjadikan setiap
+   petak warna sama saiz.
+
+Pratonton selepas setiap langkah supaya kesilapan dikesan semasa masih kecil.
+
+### Nota tentang kuning
+
+`yellow` biasa sukar dibaca pada latar putih, jadi *Amarillo* menggunakan
+`#d4a900`.
+
+## Tangkapan skrin
+
+Tangkapan skrin diambil dengan Chrome headless dalam tetingkap lebar 480 px:
+
+```bash
+chrome --headless=new --hide-scrollbars --window-size=480,1490 \
+  --screenshot=wiki/images/colour-vocab.png file:///laluan/ke/index.html
+```

wiki/Home.md

@@ -0,0 +1,53 @@
+**English** · [Dansk](Home-da) · [Bahasa Malaysia](Home-ms)
+
+# Colour Vocab
+
+A one-page flashcard site for learning the colours in Spanish, built with HTML
+and CSS only.
+
+![The finished page](images/colour-vocab.png)
+
+## Vocabulary
+
+| Spanish | 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 |
+
+## How to run
+
+Open `index.html` in any browser. There is nothing to install.
+
+## How it works
+
+`index.html` links an external stylesheet, `style.css`. The exercise rule is
+that all changes are made in the CSS and none in the HTML.
+
+1. **Link the stylesheet.** `<link rel="stylesheet" href="./style.css" />`.
+   To test the link, temporarily set `body { background-color: pink; }` and
+   check that the page changes.
+2. **Colour each title by its meaning.** Every title has an `id` (`red`,
+   `blue`, `orange`, `green`, `yellow`), so `#red { color: red; }` styles only
+   *Rojo*. The `id` is a hint if you do not know the Spanish word.
+3. **Make the titles normal weight.** All titles share the class
+   `color-title`, so one rule covers them: `.color-title { font-weight: normal; }`.
+4. **Size the images.** `img { height: 200px; width: 200px; }` makes every
+   swatch the same size.
+
+Preview after each step so a mistake is caught while it is still small.
+
+### Note on yellow
+
+Plain `yellow` is hard to read on a white page, so *Amarillo* uses `#d4a900`.
+
+## Screenshot
+
+The screenshot was taken with headless Chrome at a 480 px wide window:
+
+```bash
+chrome --headless=new --hide-scrollbars --window-size=480,1490 \
+  --screenshot=wiki/images/colour-vocab.png file:///path/to/index.html
+```

wiki/_Sidebar.md

@@ -0,0 +1,5 @@
+**Colour Vocab**
+
+- [English](Home)
+- [Dansk](Home-da)
+- [Bahasa Malaysia](Home-ms)