Final Gabriel #148
Open
Final Gabriel #148
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Avances: - La barra de navegacion esta sticky arriba, aun no creo la amburguesa para la version movil, pero es responsive en cuando a encajar con el diseño. - Las primeras dos secciones despues del NAV, estan terminadas en cuanto al diseño, y se adaptan a la perfeccion al tamaño movil. - Aun faltan las secciones restantes.
- Las secciones "Ruta ..." y "Colabora ..." ya tienen diseño.
- Se refactorizo el CSS, se generaron clases para componentes repetidos
y tener un codigo mas pequeño y mejor estructurado.
- Se agrego a la web el ojo de Cody (mascota de Codigo Facilito) como
favicon.
- Se agregaron un par de detalles mas al diseño.
- Se agrego diseño a las secciones restantes en INICIO - Se agrego un pie de pagina - Se le dio diseño a la secicon de fotos - Se agrego un modal para ver las fotos - Se agrego la funcionalidad de dar "Me encanta" - Se hico el menu Hamburguesa para las versiones moviles - Se minificaron las imagenes.
|
Oh hora ohhh |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Antes de enviar el pull request, lee estos detalles y completa tu información 🚨🚨🚨🚨
¡Hola! 👋 Este es un repositorio especial, hecho para el concurso #VeranoFrontend de Código Facilito, consideramos cada pull request una entrada para participar en el concurso.
✅ Haz finalizado todos los cambios que deseas hacer a la página, para participar en el concurso
✅ Activaste GitHub Actions y GitHub pages en tu repositorio, esto nos permitirá visualizar tu página funcionando en el navegador.
======================
Además, completa tu información para poder contactarte, en caso de que necesitemos información adicional, o debamos informarte que has ganado alguno de los premios, coloca debajo tu:
Nombre de usuario en codigofacilito.com: jesusgabrieltenorioziga
Finalmente, aquí debajo, cuéntanos un poco sobre tu proyecto, qué es lo más interesante en tu código, o que destacarías de tu implementación: 👇
Todos los enlaces tienen el atributo rel="noopener noreferrer", es parte de la seguridad que como frontends a veces dejamos pasar.
El sitio es responsive, se puede ver incluso en un Galaxy Fold.
Personalize el puntero, quiero dar la sensación de que esta pagina fue hecha por y para Cody ;)
Notece que algunas secciones en INICIO, en version desktop, aparece primero la imagen, pero al ver la web en movíl, primero aparece el texto, esto para favorecer la narrativa de las vacaciones de Cody cuando se lee a 1 columna en celulares, mientras que mantiene el diseño en desktop.
En el código CSS utilice la metodología BEM, no soy experto en esa metodología, pero me facilita el desarrollo.
Hablando de CSS, no utilice ningún framework.
Hablando de dependencias, no utilice ninguna, solo HTML, CSS y Javascript puros.
Minifiqué las imágenes para aumentar la velocidad de carga.
En la pagina FOTOS (la galería), el modal lo implemente desde 0.
Y si presionan el corazón de "Me encanta" en el modal, esa reacción se guardara y al recargar la pagina permanecerá la reacción que dejaron.
La imagenes de la galeria no estan en el HTML, se cargan con JS, esto es porque se almacenan en el archivo info-fotos.js, para que el codigo sea escalable, si se desean agregar 20 fotos, simplemente se ingresa como un objeto de javascrip y se llenan los atributos especificados.
Por ultimo quiero agradecerles por el concurso, aprendi muchisimo y me sirvio para saber de lo que soy capaz como Frontend Developer, ¡muchas gracias!.
Eso es todo, al crear el pull request, ya estás participando en el concurso, (cuentan todos los PRs enviados antes del 5 de Agosto)