# tiagoalvescosta/web-facul architecture

> Architecture diagram of the GitHub repository tiagoalvescosta/web-facul, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tiagoalvescosta/web-facul
- Repository: https://github.com/tiagoalvescosta/web-facul

## Overview

This repository is a set of Portuguese-language web-development exercises, organized by week, culminating in a cupcake-themed website. The progression covers HTML, CSS, JavaScript, and a multi-page site; it is not a single application with a demonstrated end-to-end runtime flow. The only sampled implementation is the cupcake modal script, which updates browser DOM elements. Other page relationships and interactions are not shown in the available evidence.

Main entry points: [`semana 4/script/script.js`](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/script/script.js) (Flavor modal logic)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_html["HTML exercises"]
  node_html_basics["HTML elements<br/>[cabecalho.html]"]
  node_html_forms["HTML forms<br/>[formularios.html]"]
  node_html_tables["HTML tables<br/>[tabela.html]"]
end

subgraph group_css["CSS exercises"]
  node_css_selectors["CSS selectors<br/>[class-a.html]"]
  node_css_layout["Grouping and layout<br/>[agrupamento.html]"]
  node_css_forms["Styled forms<br/>[form.html]"]
end

subgraph group_js["JavaScript exercises"]
  node_js_variables["Variables<br/>[variaveis.html]"]
  node_js_arrays["Arrays<br/>[array.html]"]
  node_js_events["Event examples<br/>[eventListener.html]"]
  node_js_interaction["Interactive example"]
end

subgraph group_cupcake["Cupcake website"]
  node_shop_home["Cupcake storefront<br/>[index.html]"]
  node_shop_menu["Cupcake menu<br/>[menu.html]"]
  node_shop_about["About page<br/>[about.html]"]
  node_shop_news["News page<br/>[news.html]"]
  node_shop_contact["Contact page<br/>[contact.html]"]
  node_modal_script["Flavor modal logic<br/>[script.js]"]
end

node_browser_dom["Browser DOM"]

node_modal_script -->|"updates elements"| node_browser_dom

click node_html_basics "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%201/cabecalho.html"
click node_html_forms "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%201/formularios.html"
click node_html_tables "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%201/tabela.html"
click node_css_selectors "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%202/class-a.html"
click node_css_layout "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%202/agrupamento.html"
click node_css_forms "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%202/formulario/form.html"
click node_js_variables "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/variaveis.html"
click node_js_arrays "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/array.html"
click node_js_events "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/eventListener.html"
click node_js_interaction "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/exemploCompleto.html"
click node_shop_home "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/index.html"
click node_shop_menu "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/menu.html"
click node_shop_about "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/about.html"
click node_shop_news "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/news.html"
click node_shop_contact "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/contact.html"
click node_modal_script "https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/script/script.js"

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_html_basics,node_html_forms,node_html_tables,node_browser_dom toneBlue
class node_css_selectors,node_css_layout,node_css_forms toneAmber
class node_js_variables,node_js_arrays,node_js_events,node_js_interaction toneMint
class node_shop_home,node_shop_menu,node_shop_about,node_shop_news,node_shop_contact,node_modal_script toneRose
```

## Components

### HTML exercises

- [HTML elements](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%201/cabecalho.html): `semana 1/cabecalho.html`
- [HTML forms](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%201/formularios.html): `semana 1/formularios.html`
- [HTML tables](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%201/tabela.html): `semana 1/tabela.html`

### CSS exercises

- [CSS selectors](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%202/class-a.html): `semana 2/class-a.html`
- [Grouping and layout](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%202/agrupamento.html): `semana 2/agrupamento.html`
- [Styled forms](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%202/formulario/form.html): `semana 2/formulario/form.html`

### JavaScript exercises

- [Variables](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/variaveis.html): `semana 3/variaveis.html`
- [Arrays](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/array.html): `semana 3/array.html`
- [Event examples](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/eventListener.html): `semana 3/eventListener.html`
- [Interactive example](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%203/exemploCompleto.html): `semana 3/exemploCompleto.html`

### Cupcake website

- [Cupcake storefront](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/index.html): `semana 4/index.html`
- [Cupcake menu](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/menu.html): `semana 4/menu.html`
- [About page](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/about.html): `semana 4/about.html`
- [News page](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/news.html): `semana 4/news.html`
- [Contact page](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/contact.html): `semana 4/contact.html`
- [Flavor modal logic](https://github.com/tiagoalvescosta/web-facul/blob/main/semana%204/script/script.js): `semana 4/script/script.js`

### Other components

- **Browser DOM**

## Connections

- Flavor modal logic → Browser DOM: updates elements (evidence: `semana 4/script/script.js`)