diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ef1a1da --- /dev/null +++ b/.gitignore @@ -0,0 +1,179 @@ +# ---> Python +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ +cover/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +.pybuilder/ +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +# For a library or package, you might want to ignore these files since the code is +# intended to run in multiple environments; otherwise, check them in: +# .python-version + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# UV +# Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control. +# This is especially recommended for binary packages to ensure reproducibility, and is more +# commonly ignored for libraries. +#uv.lock + +# poetry +# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. +# This is especially recommended for binary packages to ensure reproducibility, and is more +# commonly ignored for libraries. +# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control +#poetry.lock + +# pdm +# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. +#pdm.lock +# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it +# in version control. +# https://pdm.fming.dev/latest/usage/project/#working-with-version-control +.pdm.toml +.pdm-python +.pdm-build/ + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +# pytype static type analyzer +.pytype/ + +# Cython debug symbols +cython_debug/ + +# PyCharm +# JetBrains specific template is maintained in a separate JetBrains.gitignore that can +# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore +# and can be added to the global gitignore or merged into this file. For a more nuclear +# option (not recommended) you can uncomment the following to ignore the entire idea folder. +#.idea/ + +# Ruff stuff: +.ruff_cache/ + +# PyPI configuration file +.pypirc + + +# Doxygen output +docs/doxygen/ diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..a759dc9 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "framework"] + path = framework + url = ssh://git@git.tirsystem.com:10022/TirSystem/SQA-QC-Framework.git diff --git a/README.md b/README.md index d55300a..4ff0b65 100644 --- a/README.md +++ b/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). diff --git a/assets/images/blue.png b/assets/images/blue.png new file mode 100644 index 0000000..e8f1d8c Binary files /dev/null and b/assets/images/blue.png differ diff --git a/assets/images/green.png b/assets/images/green.png new file mode 100644 index 0000000..5664b3e Binary files /dev/null and b/assets/images/green.png differ diff --git a/assets/images/orange.png b/assets/images/orange.png new file mode 100644 index 0000000..81114c2 Binary files /dev/null and b/assets/images/orange.png differ diff --git a/assets/images/red.png b/assets/images/red.png new file mode 100644 index 0000000..dbf8175 Binary files /dev/null and b/assets/images/red.png differ diff --git a/assets/images/yellow.png b/assets/images/yellow.png new file mode 100644 index 0000000..f126369 Binary files /dev/null and b/assets/images/yellow.png differ diff --git a/docs/artifact-registry.md b/docs/artifact-registry.md new file mode 100644 index 0000000..a0fd867 --- /dev/null +++ b/docs/artifact-registry.md @@ -0,0 +1,56 @@ +# Artifact Registry + +This project's artifact state. Types, short names and `CrossReference +Candidates` come from the framework catalog +(`framework/registry/artifact-catalog.md`); this file only records where +each document lives in *this* project and the next version to use. + +Delete rows for types you don't use. Add a row the first time you create a +document of a type. `Primary File` may contain a glob (e.g. +`docs/use-cases/uc-*/uc.md`); `framework/scripts/find-crossreferences.sh` reads it. + +| Short Name | Artifact Type | Primary File | Next Available Version | +| --- | --- | --- | --- | +| BC | Business Case | docs/business-case.md | 001 | +| SA | Stakeholder Analysis | docs/stakeholder-analysis.md | 001 | + +## Languages + +Set the PO language when the project starts; `project-planning` asks for it +if it is missing. An artifact of a type marked "Written in the PO language" +exists once, in that language, under its normal name (`business-case.md`); the +`artifact` skill ("One file per artifact") has the rule. + +| Setting | Value | +| --- | --- | +| PO language | | +| PO domain | | +| High-level register | IT Executive English | +| Technical register | IT Professional English | +| Wiki languages | en and the PO language, at least (`framework/process/wiki.md`) | + +Every artifact of a type marked "Yes" below states its language and domain in +its `Language` and `Domain` Metadata rows; `new-artifact.sh` fills them from +`PO language` and `PO domain`. `Language` is a BCP 47 code (`da`, `en`). +`Domain` is a value from this list; add a row to introduce a domain, so a +reviewer can see at once which professional vocabulary a document uses. + +| Domain | Meaning | +| --- | --- | +| it | Software and IT | +| medical | Healthcare and medical devices | +| construction | Construction and civil engineering | + +| Artifact types | Register | Written in the PO language | +| --- | --- | --- | +| BC, KPI, PP, MIL | IT Executive English | Yes | +| SA, BMC, BPMN, UCD, US, UC, SSD, DM, RA, GOV, DICT | IT Professional English | Yes | +| OC, SD, DCD, ERD, TP, AD, ADR, TM, RC, QC, source code | IT Professional English | No | + +## Notes + +- "Next Available Version" is the zero-padded (3-digit) version to use the + *next* time a new document of that type is created. Increment it only when + a brand-new document is created, not when an existing document's + `## Version History` gets a row. +- `ADR` uses 4 digits (`0001`); `RC` is sequential across all artifact types. diff --git a/framework b/framework new file mode 160000 index 0000000..7c27919 --- /dev/null +++ b/framework @@ -0,0 +1 @@ +Subproject commit 7c2791939c42c18ec444bce245e9a3958b242cae diff --git a/index.html b/index.html new file mode 100644 index 0000000..d85f0c4 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + Spanish Vocabulary + + + + +

Colors

+

Learn the colors in Spanish!

+

Rojo

+ red + +

Azul

+ blue + +

Anaranjado

+ orange + +

Verde

+ green + +

Amarillo

+ yellow + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..27d005f --- /dev/null +++ b/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; +} diff --git a/wiki/Home-da.md b/wiki/Home-da.md new file mode 100644 index 0000000..7ad2a02 --- /dev/null +++ b/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.** ``. + 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 +``` diff --git a/wiki/Home-ms.md b/wiki/Home-ms.md new file mode 100644 index 0000000..093dfd5 --- /dev/null +++ b/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.** ``. + 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 +``` diff --git a/wiki/Home.md b/wiki/Home.md new file mode 100644 index 0000000..aa14e10 --- /dev/null +++ b/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.** ``. + 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 +``` diff --git a/wiki/_Sidebar.md b/wiki/_Sidebar.md new file mode 100644 index 0000000..8ee0756 --- /dev/null +++ b/wiki/_Sidebar.md @@ -0,0 +1,5 @@ +**Colour Vocab** + +- [English](Home) +- [Dansk](Home-da) +- [Bahasa Malaysia](Home-ms) diff --git a/wiki/images/colour-vocab.png b/wiki/images/colour-vocab.png new file mode 100644 index 0000000..a140bbf Binary files /dev/null and b/wiki/images/colour-vocab.png differ