# omiras/ejemploshtmlcursofemxa architecture

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

- Interactive diagram: https://gitdiagram.com/omiras/ejemploshtmlcursofemxa
- Repository: https://github.com/omiras/ejemploshtmlcursofemxa

## Overview

#### Purpose
A static Spanish-language learning repository for introductory HTML, CSS, and JavaScript. It contains standalone browser pages and JavaScript source examples organized by topic; there is no application backend, package manifest, build pipeline, or test suite.

#### Primary Entry Points
- `index.html` is the likely top-level HTML landing/example page.
- Standalone HTML lessons can be opened directly in a browser, including `adopcion.html`, `ejemplosFlexbox.html`, and `javascript-condicionales/resumen-condicionales.html`.
- JavaScript lessons are individual executable scripts, intended for browser developer tools or inclusion from lesson pages, such as `javascript-variables/variables1.js`.

#### HTML and CSS Demonstration Layer
The root and CSS-focused pages demonstrate document structure and visual styling concepts:
- `ejemploCSSattributo.html`
- `ejemplosSelecoresCSSAvanzados.html`
- `ejemplosTipografiaResponsive.html`

CSS is locally authored and directly consumed by corresponding example pages rather than compiled or bundled:
- `ejemplosCSSEspecificidad/estilos-greguerias.css`
- `ejemplosModeloCaja/ejemplos-box-mode.css`
- `ejemplosModeloCaja/index.html`

The boundary is browser-native HTML/CSS rendering; pages are independent rather than parts of a shared UI framework.

#### Layout and Responsive CSS Lessons
Several pages isolate CSS layout mechanisms for direct visual comparison:
- `ejemplosFlexbox.html`
- `ejemploFlexboxAlignContent.html`
- `ejemploPropiedadPosition.html`

Box-model examples group HTML and CSS together under one directory:
- `ejemplosModeloCaja/index.html`
- `ejemplosModeloCaja/index-backup.html`
- `ejemplosModeloCaja/ejemplos-box-mode.css`

Backup files suggest lesson iteration, not a versioned runtime or deployment artifact.

#### JavaScript Fundamentals Modules
JavaScript is segmented by language concept, with each file serving as a self-contained instructional unit:
- Variables: `javascript-variables/variables1.js`, `javascript-variables/variables-const.js`
- Numbers: `javascript-numbers/numbers-1.js`
- Strings: `strings/strings-1.js`, `strings/metodos-string.js`
- Functions: `javascript-funciones/funciones-basicas.js`, `javascript-funciones/funciones-return.js`

Control flow continues in dedicated directories:
- `javascript-condicionales/ejemplos-condicionales.js`
- `javascript-bucles/bucles-for.js`
- `javascript-bucles/bucle-while.js`

The principal flow is learner/browser execution of a selected source file, producing values, branches, or output according to the topic.

#### Conditional and Form Interaction Examples
Conditional logic has both script-only and HTML-facing examples:
- `javascript-condicionales/formulario-hispoteca.html`
- `javascript-condicionales/resumen-condicionales.html`
- `javascript-condicionales/mayor-edad.js`

These files form the closest equivalent to interactive behavior: browser input or example state is evaluated through JavaScript conditionals. No server-side validation, persistence, API, or authentication boundary is present.

#### Error Demonstrations and Assets
Error lessons intentionally isolate invalid or missing JavaScript behavior:
- `javascript-errores/error-reference.js`
- `javascript-errores/error-sintaxis.js`

Local static assets are served directly by the browser:
- `imagenes/gato.avif`
- `adopcion.html`

There are no identified external services, databases, cloud infrastructure, runtime dependencies, or build/deployment requirements beyond a static file host or local browser access.

Main entry points: [`adopcion.html`](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/adopcion.html) (Adoption page), [`javascript-condicionales/resumen-condicionales.html`](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-condicionales/resumen-condicionales.html) (Conditional lesson pages), [`ejemploCSSattributo.html`](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemploCSSattributo.html) (HTML/CSS examples), [`ejemplosModeloCaja/index.html`](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosModeloCaja/index.html) (Box-model lesson)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_html_css["HTML & CSS lessons"]
  node_landing["Landing page<br/>HTML page<br/>[index.html]"]
  node_html_css_pages["HTML/CSS examples<br/>HTML pages"]
  node_specificity_css["Specificity styles<br/>CSS stylesheet"]
  node_adoption_page["Adoption page<br/>HTML page<br/>[adopcion.html]"]
  node_cat_asset["Cat image<br/>Static asset<br/>[gato.avif]"]
end

subgraph group_layout["Layout lessons"]
  node_box_model_page["Box-model lesson<br/>HTML page<br/>[index.html]"]
  node_box_model_css["Box-model styles<br/>CSS stylesheet"]
  node_flexbox_pages["Flexbox examples<br/>HTML pages"]
  node_position_page["Position example<br/>HTML page"]
end

subgraph group_js_fundamentals["JavaScript fundamentals"]
  node_variables["Variables<br/>JavaScript lesson<br/>[variables1.js]"]
  node_numbers["Numbers<br/>JavaScript lesson<br/>[numbers-1.js]"]
  node_strings["Strings<br/>JavaScript lesson<br/>[strings-1.js]"]
  node_functions["Functions<br/>JavaScript lesson"]
  node_loops["Loops<br/>JavaScript lesson<br/>[bucles-for.js]"]
  node_error_lessons["Error demonstrations<br/>JavaScript lessons<br/>[error-reference.js]"]
end

subgraph group_conditionals["Conditionals &amp; interaction"]
  node_conditional_pages["Conditional lesson pages<br/>HTML pages"]
  node_conditional_logic["Conditional logic<br/>JavaScript lesson<br/>[mayor-edad.js]"]
end

node_browser{{"Browser / static host<br/>runtime boundary"}}

node_browser -->|"opens"| node_landing
node_browser -->|"renders"| node_html_css_pages
node_browser -->|"renders"| node_box_model_page
node_browser -->|"renders"| node_flexbox_pages
node_browser -->|"renders"| node_position_page
node_browser -->|"opens"| node_conditional_pages
node_browser -->|"executes"| node_variables
node_browser -->|"executes"| node_numbers
node_browser -->|"executes"| node_strings
node_browser -->|"executes"| node_functions
node_browser -->|"executes"| node_loops
node_browser -->|"executes"| node_conditional_logic
node_browser -->|"demonstrates errors"| node_error_lessons
node_browser -->|"renders"| node_adoption_page
node_specificity_css -->|"styles"| node_html_css_pages
node_box_model_css -->|"styles"| node_box_model_page
node_conditional_pages -->|"uses"| node_conditional_logic
node_adoption_page -->|"loads"| node_cat_asset

click node_landing "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/index.html"
click node_html_css_pages "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemploCSSattributo.html"
click node_specificity_css "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosCSSEspecificidad/estilos-greguerias.css"
click node_box_model_page "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosModeloCaja/index.html"
click node_box_model_css "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosModeloCaja/ejemplos-box-mode.css"
click node_flexbox_pages "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosFlexbox.html"
click node_position_page "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemploPropiedadPosition.html"
click node_variables "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-variables/variables1.js"
click node_numbers "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-numbers/numbers-1.js"
click node_strings "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/strings/strings-1.js"
click node_functions "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-funciones/funciones-basicas.js"
click node_loops "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-bucles/bucles-for.js"
click node_conditional_pages "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-condicionales/resumen-condicionales.html"
click node_conditional_logic "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-condicionales/mayor-edad.js"
click node_error_lessons "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-errores/error-reference.js"
click node_adoption_page "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/adopcion.html"
click node_cat_asset "https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/imagenes/gato.avif"

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_landing,node_html_css_pages,node_specificity_css,node_adoption_page,node_cat_asset toneBlue
class node_box_model_page,node_box_model_css,node_flexbox_pages,node_position_page toneAmber
class node_variables,node_numbers,node_strings,node_functions,node_loops,node_error_lessons toneMint
class node_conditional_pages,node_conditional_logic toneRose
class node_browser toneNeutral
```

## Components

### HTML & CSS lessons

Independent browser-rendered pages.

- [Landing page](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/index.html): HTML page · `index.html`
- [HTML/CSS examples](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemploCSSattributo.html): HTML pages · Structure, selectors, attributes, and responsive typography lessons. · `ejemploCSSattributo.html`
- [Specificity styles](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosCSSEspecificidad/estilos-greguerias.css): CSS stylesheet · `ejemplosCSSEspecificidad/estilos-greguerias.css`
- [Adoption page](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/adopcion.html): HTML page · `adopcion.html`
- [Cat image](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/imagenes/gato.avif): Static asset · `imagenes/gato.avif`

### Layout lessons

Visual CSS layout comparisons.

- [Box-model lesson](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosModeloCaja/index.html): HTML page · `ejemplosModeloCaja/index.html`
- [Box-model styles](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosModeloCaja/ejemplos-box-mode.css): CSS stylesheet · `ejemplosModeloCaja/ejemplos-box-mode.css`
- [Flexbox examples](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemplosFlexbox.html): HTML pages · Includes alignment and layout comparisons. · `ejemplosFlexbox.html`
- [Position example](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/ejemploPropiedadPosition.html): HTML page · `ejemploPropiedadPosition.html`

### JavaScript fundamentals

Self-contained executable concept scripts.

- [Variables](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-variables/variables1.js): JavaScript lesson · `javascript-variables/variables1.js`
- [Numbers](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-numbers/numbers-1.js): JavaScript lesson · `javascript-numbers/numbers-1.js`
- [Strings](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/strings/strings-1.js): JavaScript lesson · `strings/strings-1.js`
- [Functions](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-funciones/funciones-basicas.js): JavaScript lesson · `javascript-funciones/funciones-basicas.js`
- [Loops](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-bucles/bucles-for.js): JavaScript lesson · `javascript-bucles/bucles-for.js`
- [Error demonstrations](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-errores/error-reference.js): JavaScript lessons · Intentionally invalid or missing JavaScript behavior. · `javascript-errores/error-reference.js`

### Conditionals & interaction

Browser-facing conditional examples.

- [Conditional lesson pages](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-condicionales/resumen-condicionales.html): HTML pages · Browser-facing conditional summaries and form examples. · `javascript-condicionales/resumen-condicionales.html`
- [Conditional logic](https://github.com/omiras/ejemploshtmlcursofemxa/blob/main/javascript-condicionales/mayor-edad.js): JavaScript lesson · Evaluates example state or browser input. · `javascript-condicionales/mayor-edad.js`

### Other components

- **Browser / static host**: runtime boundary · Directly opens and renders repository files.

## Connections

- Browser / static host → Landing page: opens
- Browser / static host → HTML/CSS examples: renders
- Browser / static host → Box-model lesson: renders
- Browser / static host → Flexbox examples: renders
- Browser / static host → Position example: renders
- Browser / static host → Conditional lesson pages: opens
- Browser / static host → Variables: executes · Via developer tools or lesson inclusion.
- Browser / static host → Numbers: executes
- Browser / static host → Strings: executes
- Browser / static host → Functions: executes
- Browser / static host → Loops: executes
- Browser / static host → Conditional logic: executes
- Browser / static host → Error demonstrations: demonstrates errors
- Browser / static host → Adoption page: renders
- Specificity styles → HTML/CSS examples: styles
- Box-model styles → Box-model lesson: styles
- Conditional lesson pages → Conditional logic: uses · Form or example state is evaluated by conditional code.
- Adoption page → Cat image: loads