https://github.com/femcodersclub/femcoders-css-grid-examples
Colección de ejemplos prácticos y demostraciones interactivas del sistema CSS Grid
https://github.com/femcodersclub/femcoders-css-grid-examples
css-animations css-grid dashboard holygrail javascript js layout
Last synced: about 1 month ago
JSON representation
Colección de ejemplos prácticos y demostraciones interactivas del sistema CSS Grid
- Host: GitHub
- URL: https://github.com/femcodersclub/femcoders-css-grid-examples
- Owner: femcodersclub
- Created: 2025-03-30T22:58:39.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-08T11:13:08.000Z (about 1 month ago)
- Last Synced: 2025-04-08T12:25:35.279Z (about 1 month ago)
- Topics: css-animations, css-grid, dashboard, holygrail, javascript, js, layout
- Language: HTML
- Homepage: https://femcodersclub.github.io/femcoders-css-grid-examples/
- Size: 41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# CSS Grid Examples - FemCoders Club
## 📋 Descripción del Proyecto
Este proyecto es una colección de ejemplos prácticos y demostraciones interactivas del sistema CSS Grid. Creado por FemCoders Club, el sitio proporciona una guía visual y didáctica para entender y dominar CSS Grid para crear layouts modernos y responsivos en desarrollo web.
Este repositorio sirve como complemento práctico al artículo ["CSS Grid: Domina el sistema de cuadrículas en tu página web"](https://www.femcodersclub.com/recursos/css/css-grid) publicado en el blog de FemCoders Club. Mientras que el artículo ofrece una explicación teórica de los conceptos, este proyecto proporciona ejemplos interactivos y casos de uso reales para poner en práctica esos conocimientos.
## 🚀 Características Principales
- **Ejemplos prácticos**: Demostraciones interactivas con código para aprender mediante la práctica
- **Diseño responsivo**: Todos los ejemplos se adaptan a diferentes tamaños de pantalla
- **Explicaciones detalladas**: Cada ejemplo incluye explicaciones paso a paso y fragmentos de código
- **Casos de uso reales**: Ejemplos basados en escenarios comunes de desarrollo web
## 📚 Páginas del Proyecto
El proyecto contiene las siguientes páginas, cada una enfocada en un aspecto diferente de CSS Grid:
1. **Holy Grail Layout**: Implementación del patrón clásico de diseño web con CSS Grid.
2. **Galería de Imágenes**: Muestra de diferentes layouts para galerías de imágenes utilizando Grid.
3. **Grid Implícito/Explícito**: Explicación de conceptos avanzados de Grid y cómo controlar el comportamiento automático.
4. **Layout Revista**: Diseño editorial tipo revista para mostrar contenido de manera atractiva.
5. **Dashboard**: Implementación de un dashboard administrativo con widgets organizados en Grid.
## 💻 Tecnologías Utilizadas
- HTML5
- CSS3 (con enfoque en CSS Grid)
- JavaScript (para interactividad)
- Font Awesome (para iconos)
## 🌐 Navegación por el Proyecto
La estructura del proyecto es la siguiente:
```
css-grid-examples/
├── index.html # Página principal
├── holy-grail.html # Ejemplo de Holy Grail Layout
├── galeria.html # Galerías de imágenes con Grid
├── grid-implicito-explicito.html # Explicación de grid implícito vs explícito
├── layout-revista.html # Ejemplo de layout estilo revista
├── dashboard.html # Dashboard administrativo
├── css/
│ ├── styles.css # Estilos generales
│ ├── holy-grail.css # Estilos específicos para Holy Grail
│ ├── galeria.css # Estilos para la galería
│ ├── grid-implicito-explicito.css # Estilos para grid implícito/explícito
│ ├── layout-revista.css # Estilos para layout revista
│ └── dashboard.css # Estilos para dashboard
├── js/
│ ├── main.js # JavaScript general
│ ├── galeria.js # JavaScript para la galería
│ ├── grid-implicito-explicito.js # JS para demo interactiva
│ └── dashboard.js # JS para dashboard
└── assests/ # Imágenes y recursos
```
## 🔍 Cómo Usar este Proyecto
1. **Clonar el repositorio**:
```bash
git clone https://github.com/femcodersclub/css-grid-examples.git
cd css-grid-examples
```
2. **Abrir el proyecto**:
- Abre `index.html` en tu navegador para acceder a la página principal
- Navega a través de las diferentes secciones usando el menú de navegación
3. **Experimentar con el código**:
- Cada página incluye explicaciones y fragmentos de código que puedes copiar y modificar
- Prueba los controles interactivos para ver cómo cambia el diseño
## 🛠️ Desafíos para Practicar
Cada sección incluye desafíos para que puedas poner en práctica lo aprendido:
- Crear variaciones de los layouts presentados
- Implementar diseños responsivos con CSS Grid
- Combinar Grid con otras técnicas de CSS
## 👩💻 Contribuir al Proyecto
¡Estamos abiertos a contribuciones! Si deseas mejorar este proyecto:
1. Haz un Fork del repositorio
2. Crea una nueva rama para tu función (`git checkout -b feature/nueva-funcion`)
3. Realiza tus cambios y haz commit (`git commit -m 'Añadir nueva función'`)
4. Sube tus cambios (`git push origin feature/nueva-funcion`)
5. Abre un Pull Request
## 📣 Comunidad FemCoders
¡Únete a nuestra comunidad en:
- [Sitio web](https://www.femcodersclub.com/)
- [GitHub](https://github.com/femcodersclub)
- [Slack](https://communityinviter.com/apps/femcodersclub/femcoders-club)
- [LinkedIn](https://www.linkedin.com/company/fem-coders-club)
Comparte tus creaciones usando CSS Grid con el hashtag **#FemCodersClubGrid**
## 📝 Licencia
Este proyecto está licenciado bajo [MIT License](LICENSE).
## 🙏 Agradecimientos
Agradecemos a todos los miembros de FemCoders Club que han contribuido con ideas, código y feedback para hacer posible este proyecto educativo.
---
© 2025 FemCoders Club. Creado con 💜 y CSS Grid.