Fondo hero versión escritorio Fondo hero versión mobile

Sitio Web "La Moderna"

El primer ejercicio completo de estructura y estilo visual.

Demo del Proyecto Desktop Demo del Proyecto Mobile

¿Qué es este proyecto?

El sitio web “La Moderna” fue uno de mis primeros proyectos importantes, y el primero en el que logré completar toda la parte visual de un sitio web desde cero. No está en línea, ya que fue desarrollado de forma local y se puede abrir desde una carpeta en el escritorio, pero fue clave para practicar y aplicar lo que había aprendido sobre HTML, CSS y Bootstrap. Fue un proyecto que me dejó muy satisfecho, sobre todo porque recibió buenos comentarios de profesores y compañeros, lo que me hizo sentir que iba por buen camino y que estaba dando un paso firme en esto del desarrollo web.

¿Cómo se realizó este proyecto?

El proceso comenzó con el diseño de prototipos en versiones Desktop y Mobile utilizando Adobe XD, que luego fueron transformados en mockups más avanzados para visualizar con mayor realismo la interfaz final. Con estos elementos como guía, procedí al desarrollo del sitio utilizando Visual Studio Code como entorno de trabajo. La estructura del sitio fue construida con HTML5, el diseño se estilizó con CSS, y Bootstrap fue clave para facilitar la implementación de un diseño responsive. Tras múltiples etapas de revisión y ajustes, el sitio quedó finalizado y reflejó con precisión lo planificado durante las fases de diseño.

Tecnologías utilizadas

Para el desarrollo de "La Moderna" empleé una combinación de herramientas esenciales. Adobe XD fue utilizado para crear los prototipos iniciales. Visual Studio Code sirvió como editor principal de código. HTML5 permitió estructurar el contenido del sitio, mientras que CSS se encargó de definir su estilo visual. Bootstrap fue crucial para facilitar el diseño adaptable a distintos dispositivos y mantener un orden lógico en la disposición de los elementos. Esta combinación de tecnologías me permitió ejecutar el proyecto de manera eficiente, obteniendo un resultado visualmente sólido y técnicamente funcional.

Adobe XD
HTML5
CSS3
Bootstrap
WordPress

GALERÍA DE IMÁGENES

Galería Proyecto 2 - Imagen 1 Galería Proyecto 2 - Imagen 2 Galería Proyecto 2 - Imagen 3 Galería Proyecto 2 - Imagen 4 Galería Proyecto 2 - Imagen 5 Galería Proyecto 2 - Imagen 6 Galería Proyecto 2 - Imagen 7 Galería Proyecto 2 - Imagen 8 Galería Proyecto 2 - Imagen 9

Resumen final y descarga

Este proyecto consistió en implementar un sitio web moderno y funcional para el cliente, siguiendo los estándares establecidos. El diseño fue optimizado tanto para computadoras como para dispositivos móviles. Si se desea, el sitio puede descargarse para explorarlo personalmente.

Volver a Proyectos