Skip to content

Feature/pago #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JChuck0 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature/pago #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
089ef4f
Estructura base del home, nav y footer
JChuck0 Jul 23, 2026
1c951e3
Estilos y compilación output.css
rubenlosada11 Jul 23, 2026
62bd1e9
Actualización readmes
rubenlosada11 Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 75 additions & 28 deletions README.es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,91 @@
# HTML Hello
# Nombre Marca - Web de Moda

El boilerplate más básico para cualquier estudiante de 4Geeks Academy, empieza tu primer sitio web desde cero.
Sitio web de una marca de moda para hombre y mujer con sede en Francia.

> Tienes un video tutorial sobre [cómo usar esta plantilla para crear tu primer sitio web aquí](https://youtu.be/dfbDCMu_p-0).
El proyecto esta orientado a desarrollo front-end colaborativo y organizado por ramas para permitir que varios integrantes trabajen en paralelo (home, catalogo, producto, carrito, checkout, UI, contenido y estilos).

## ¿Qué hacer a continuación?
## Objetivo del proyecto

Crea un archivo `index.html` con [la estructura básica de HTML](https://4geeks.com/es/lesson/what-is-html-learn-html-es#estructura-de-pgina) y ve el resultado en vivo corriendo un servidor web utilizando el siguiente comando:
- Construir una experiencia de e-commerce editorial para una marca de moda.
- Mantener una base de codigo clara para trabajo en equipo.
- Facilitar iteraciones rapidas por funcionalidades usando flujo Git por ramas.

```bash
$ pip3 install flask && python3 server.py
```
## Stack actual

- HTML5
- Tailwind CSS
- CSS (entrada y salida de compilacion)
- JavaScript (scripts de interfaz)
- Python (servidor local para desarrollo)

- Puedes crear tantos archivos HTML cómo desees.
- También puedes crear archivos CSS e importarlos en tu página web utilizando una etiqueta `<link>` ubicándola entre las etiquetas `<head></head>`, de la siguiente manera:
## Estructura base del proyecto

```html
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>
Estructura recomendada para la web y sus recursos visuales:

```text
.
|- home.html
|- catalogo.html
|- producto.html
|- carrito.html
|- checkout.html
|- input.css
|- output.css
|- tailwind.config.js
|- server.py
|- assets/
| |- css/
| | |- style.css
| |- js/
| | |- main.js
| |- img/
| | |- hero/
| | |- products/
| | |- banners/
| |- icons/
| | |- ui/
| | |- social/
|- README.md
|- README.es.md
```

- Si deseas usar Tailwind CSS, agrégalo de forma opcional mediante el CDN oficial de Tailwind CSS v4 dentro del mismo `<head>`:
Nota: actualmente este repositorio incluye los archivos base y puede ampliarse con esta estructura para separar contenido, estilos, scripts, imagenes e iconos de forma mantenible.

## Flujo colaborativo por ramas

Ramificacion basica sugerida:

```html
<head>
...
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>
- `main`: rama estable y lista para entrega.
- `develop`: rama de integracion de cambios aprobados.
- `feature/*`: nuevas funcionalidades (ejemplo: `feature/navbar-home`, `feature/hero-carousel`, `feature/cart-dropdown`).
- `fix/*`: correcciones puntuales.
- `hotfix/*`: arreglos urgentes sobre produccion.

Flujo recomendado:

1. Crear rama desde `develop`.
2. Implementar cambios atomicos con commits claros.
3. Abrir Pull Request hacia `develop`.
4. Revisar, aprobar y hacer merge.
5. Publicar en `main` cuando el sprint este validado.

## Como ejecutar en local

Inicia un servidor local:

```bash
pip3 install flask && python3 server.py
```

Si compilas Tailwind desde `input.css` a `output.css`, usa el comando configurado por tu equipo (por ejemplo via CLI o script npm).

## Agradecimientos
## Convenciones de trabajo

Esta y otras plantillas son utilizadas para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp).
- Nombrar ramas y commits de forma descriptiva.
- Evitar mezclar varias features en la misma rama.
- Mantener coherencia visual en tipografias, color y espaciados.
- Documentar cualquier cambio de estructura en este README.

Realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes.
## Estado

Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero/?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/desarrollador-full-stack/desarrollador-full-stack), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
Proyecto en evolucion como repositorio colaborativo para desarrollo web de la marca.
96 changes: 69 additions & 27 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,83 @@
# HTML Hello
# Nombre Marca - Fashion Website

The most basic boilerplate for any 4Geeks Academy student, start your very first website from scratch.
Website project for a fashion brand based in France, focused on menswear and womenswear e-commerce experience.

> There is a video tutorial on [how to use this template to create your very first website here](https://youtu.be/dfbDCMu_p-0).
This repository is organized for collaborative web development, with a basic branching strategy that allows multiple contributors to work in parallel on pages and features.

## What to do next?
## Project purpose

Create an `index.html` file with the [basic HTML structure](http://4geeks.com/lesson/what-is-html-learn-html#page-structure) and see it live by running a web-server using the following command:
- Build a modern fashion storefront (home, catalog, product, cart and checkout views).
- Keep a clean and maintainable front-end codebase.
- Support team collaboration through branch-based workflows and pull requests.

```bash
$ pip3 install flask && python3 server.py
```
## Current stack

- HTML5
- Tailwind CSS
- CSS (source + compiled output)
- JavaScript (UI behavior)
- Python (local development server)

- You can create as many HTML files as you want.
- You can also create CSS files and import them into your website using a `<link>` tag placed between the `<head></head>` tags, like this:
## Suggested base structure

```html
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>
```text
.
|- home.html
|- catalogo.html
|- producto.html
|- carrito.html
|- checkout.html
|- input.css
|- output.css
|- tailwind.config.js
|- server.py
|- assets/
| |- css/
| | |- style.css
| |- js/
| | |- main.js
| |- img/
| | |- hero/
| | |- products/
| | |- banners/
| |- icons/
| | |- ui/
| | |- social/
|- README.md
|- README.es.md
```

- If you want to use Tailwind CSS, add it optionally via the official Tailwind CSS v4 CDN inside the same `<head>`:
Note: the repository currently includes the core files and can be expanded with this structure to separate styles, scripts, images and icons in a scalable way.

## Collaborative branching model

Basic branching strategy:

```html
<head>
...
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>
- `main`: stable branch, release-ready.
- `develop`: integration branch for approved work.
- `feature/*`: new features (for example `feature/home-hero`, `feature/catalog-grid`, `feature/cart-summary`).
- `fix/*`: standard bug fixes.
- `hotfix/*`: urgent production fixes.

Recommended workflow:

1. Create a branch from `develop`.
2. Implement focused changes with clear commits.
3. Open a Pull Request to `develop`.
4. Review, approve and merge.
5. Promote to `main` after sprint validation.

## Run locally

```bash
pip3 install flask && python3 server.py
```

### Contributors
If your team compiles Tailwind from `input.css` to `output.css`, run the CLI or npm script defined by your setup.

This template was built as part of the [Full Stack Developer course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer) at [4Geeks Academy Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and [many other contributors](https://github.com/4GeeksAcademy/html-hello/graphs/contributors).
## Team conventions

You can find other templates and resources like this at the [school's GitHub page](https://github.com/4geeksacademy/).
- Use descriptive branch and commit names.
- Keep one feature per branch.
- Preserve visual consistency across typography, color and spacing.
- Update this README when folder structure or workflow changes.
Loading