# ali-sdg90/learning-css- architecture

> Architecture diagram of the GitHub repository ali-sdg90/learning-css-, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ali-sdg90/learning-css-
- Repository: https://github.com/ali-sdg90/learning-css-

## Overview

This repository is a static collection of CSS-learning pages and small practice projects, not a single application with a shared runtime. The main user workflow is browsing a project page and seeing its HTML styled in the browser. A distinct data-driven branch is the Games-I-Played list: its script fetches and alphabetizes game records, then adds rows to the page. The README also documents exercises, input experiments, and earlier CSS work. Some pages and stylesheet wiring were not sampled, so links between those files are omitted.

Main entry points: [`Games-I-Played/script.js`](https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/script.js) (List renderer), [`Games-I-Played/index.html`](https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/index.html) (Games list page), [`index.html`](https://github.com/ali-sdg90/learning-css-/blob/main/index.html) (Repository hub), [`6hr-CSS-`](https://github.com/ali-sdg90/learning-css-/tree/main/6hr-CSS-) (CSS journey pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_hub["Showcase hub"]
  node_main_hub["Repository hub<br/>[index.html]"]
  node_hub_style["Hub styling<br/>[style.css]"]
end

subgraph group_learning["CSS learning"]
  node_six_hour_pages["CSS journey pages"]
  node_six_hour_style["CSS journey styles<br/>[style.css]"]
  node_advanced_style["Advanced styles<br/>[adv-css.css]"]
  node_first_css["Early CSS page<br/>[index.html]"]
end

subgraph group_practice["Practice projects"]
  node_exercise_pages["Exercise website"]
  node_exercise_styles["Exercise styles"]
  node_exercise_media["Exercise assets"]
  node_input_page["Input experiments<br/>[index.html]"]
  node_input_styles["Input styling<br/>[style.css]"]
end

subgraph group_games["Game tracker"]
  node_games_page["Games list page<br/>[index.html]"]
  node_games_script["List renderer<br/>[script.js]"]
  node_games_data["Game records<br/>[games.json]"]
  node_games_style["List styling<br/>[style.css]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_main_hub
node_visitor -->|"browses"| node_six_hour_pages
node_visitor -->|"browses"| node_first_css
node_visitor -->|"browses"| node_exercise_pages
node_visitor -->|"browses"| node_input_page
node_visitor -->|"browses"| node_games_page
node_games_script -->|"fetches"| node_games_data
node_games_script -->|"appends rows"| node_games_page

click node_main_hub "https://github.com/ali-sdg90/learning-css-/blob/main/index.html"
click node_hub_style "https://github.com/ali-sdg90/learning-css-/blob/main/Repo-hub/style.css"
click node_six_hour_pages "https://github.com/ali-sdg90/learning-css-/tree/main/6hr-CSS-"
click node_six_hour_style "https://github.com/ali-sdg90/learning-css-/blob/main/6hr-CSS-/style.css"
click node_advanced_style "https://github.com/ali-sdg90/learning-css-/blob/main/6hr-CSS-/adv-css.css"
click node_first_css "https://github.com/ali-sdg90/learning-css-/blob/main/First%20CSS/index.html"
click node_exercise_pages "https://github.com/ali-sdg90/learning-css-/tree/main/Exersise/HTML"
click node_exercise_styles "https://github.com/ali-sdg90/learning-css-/tree/main/Exersise/CSS"
click node_exercise_media "https://github.com/ali-sdg90/learning-css-/tree/main/Exersise/img"
click node_input_page "https://github.com/ali-sdg90/learning-css-/blob/main/inputs/index.html"
click node_input_styles "https://github.com/ali-sdg90/learning-css-/blob/main/inputs/style.css"
click node_games_page "https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/index.html"
click node_games_script "https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/script.js"
click node_games_data "https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/games.json"
click node_games_style "https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/style.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main_hub,node_hub_style toneBlue
class node_six_hour_pages,node_six_hour_style,node_advanced_style,node_first_css toneAmber
class node_exercise_pages,node_exercise_styles,node_exercise_media,node_input_page,node_input_styles toneMint
class node_games_page,node_games_script,node_games_data,node_games_style toneRose
class node_visitor toneIndigo
```

## Components

### Showcase hub

- [Repository hub](https://github.com/ali-sdg90/learning-css-/blob/main/index.html): `index.html`
- [Hub styling](https://github.com/ali-sdg90/learning-css-/blob/main/Repo-hub/style.css): `Repo-hub/style.css`

### CSS learning

- [CSS journey pages](https://github.com/ali-sdg90/learning-css-/tree/main/6hr-CSS-): `6hr-CSS-`
- [CSS journey styles](https://github.com/ali-sdg90/learning-css-/blob/main/6hr-CSS-/style.css): `6hr-CSS-/style.css`
- [Advanced styles](https://github.com/ali-sdg90/learning-css-/blob/main/6hr-CSS-/adv-css.css): `6hr-CSS-/adv-css.css`
- [Early CSS page](https://github.com/ali-sdg90/learning-css-/blob/main/First%20CSS/index.html): `First CSS/index.html`

### Practice projects

- [Exercise website](https://github.com/ali-sdg90/learning-css-/tree/main/Exersise/HTML): `Exersise/HTML`
- [Exercise styles](https://github.com/ali-sdg90/learning-css-/tree/main/Exersise/CSS): `Exersise/CSS`
- [Exercise assets](https://github.com/ali-sdg90/learning-css-/tree/main/Exersise/img): `Exersise/img`
- [Input experiments](https://github.com/ali-sdg90/learning-css-/blob/main/inputs/index.html): `inputs/index.html`
- [Input styling](https://github.com/ali-sdg90/learning-css-/blob/main/inputs/style.css): `inputs/style.css`

### Game tracker

- [Games list page](https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/index.html): `Games-I-Played/index.html`
- [List renderer](https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/script.js): `Games-I-Played/script.js`
- [Game records](https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/games.json): `Games-I-Played/games.json`
- [List styling](https://github.com/ali-sdg90/learning-css-/blob/main/Games-I-Played/style.css): `Games-I-Played/style.css`

### Other components

- **Visitor**

## Connections

- Visitor → Repository hub: opens
- Visitor → CSS journey pages: browses
- Visitor → Early CSS page: browses
- Visitor → Exercise website: browses
- Visitor → Input experiments: browses
- Visitor → Games list page: browses
- List renderer → Game records: fetches
- List renderer → Games list page: appends rows