https://github.com/djimenezweb/photosnap
Multi-page website based on a Frontend Mentor challenge
https://github.com/djimenezweb/photosnap
css frontend-mentor html javascript
Last synced: 3 months ago
JSON representation
Multi-page website based on a Frontend Mentor challenge
- Host: GitHub
- URL: https://github.com/djimenezweb/photosnap
- Owner: djimenezweb
- Created: 2022-12-24T13:40:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-22T10:30:27.000Z (about 2 years ago)
- Last Synced: 2025-01-12T23:26:40.584Z (4 months ago)
- Topics: css, frontend-mentor, html, javascript
- Language: HTML
- Homepage: https://djimenezweb.github.io/photosnap/
- Size: 20.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Photosnap
## Ejemplo en vivo
- [Vista en vivo de la página web](https://www.djimenezweb.com/photosnap/)
## Descripción 📑
Proyecto de [Frontend Mentor](https://www.frontendmentor.io/challenges/photosnap-multipage-website-nMDSrNmNW) de una página web para compartir fotos. El proyecto entero se compone de una landing page y tres páginas adicionales (Stories, Features y Pricing). Todas las páginas están adaptadas a móvil, tableta y escritorio. La versión para móvil tiene un menú responsive. El lenguaje está fuertemente orientado a HTML y CSS, con un poco de JavaScript.
## ¿Qué he aprendido en este proyecto? 🙇🏻
En esta web me propuse hacer un uso intensivo de grid, pues es especialmente potente para alinear contenido. No sólo me basé en grid para hacer la rejilla de fotos, sino que cada una de las tarjetas es asimismo una rejilla grid de 1×1. De esta manera es muchísimo más fácil alinear el texto sobre la imagen.
También he practicado mucho los selectores combinados. Aunque se desaconseja su uso por cuestiones de especificidad, no me he encontrado con ningún problema y me ha parecido un método especialmente flexible para aplicar pequeños estilos en concreto.
Los botones del menú responsive y de cambio de precios están resueltos con JavaScript. Para el script de precios hay un array de objetos con todos los precios posibles y una función que aplica el texto adecuado según el estado del botón.
Ha sido un trabajo del que estoy especialmente orgulloso por la rapidez que me llevó hacer la mayoría de las páginas. Sin embargo, la tabla de precios llevó más trabajo del que tenía pensado.
Como grandes puntos a mejorar, creo que debería plantearme el diseño responsive de otra manera. Una parte del problema se debe a que Figma ofrece un diseño a distintos tamaños, pero no da una idea de cuál debería ser el comportamiento de la página. Gran parte de la web está resuelta con media queries para tres tamaños distintos, pero me he empezado a dar cuenta de que hay que buscar soluciones más flexibles que sirvan para todo.
## Tecnologías 🛠
[](https://es.wikipedia.org/wiki/HTML5)
[](https://es.wikipedia.org/wiki/CSS)
[](https://es.wikipedia.org/wiki/JavaScript)
## Autor ✒️
**Daniel Jiménez**
- [email protected]
- [LinkedIn](https://www.linkedin.com/in/djimenezweb)
- [Porfolio web](https://www.djimenezweb.com)
## Instalación
Este proyecto no necesita de instalación. Simplemente abre la carpeta o haz doble click en el .html
## Licencia 📄
MIT Public License v3.0
No puede usarse comercialmente.