angela-gm / midterm-ironhack Goto Github PK

Circle Landing Agency Website

Visit Website

• El proyecto consiste en replicar una página web que se nos proporciona. Tenemos dos opciones disponibles, una versión básica y una versión avanzada. El objetivo del proyecto es poner en práctica los conocimientos adquiridos en las clases de CSS3, HTML5 y JavaScript.

• Tecnologías utilizadas: En este proyecto se utilizaron las siguientes tecnologías: HTML5, CSS3 y JavaScript.

• Funcionalidades principales: El proyecto tiene como funcionalidad principal replicar una página web existente, a elegir entre su versión básica o avanzada.

• Instrucciones de instalación y configuración: No es necesario

• Enlaces a documentación adicional o recursos relacionados con el proyecto:

• Versión básica

• Versión avanzada

• Archivo Figma

• {JSON} Placeholder (API)

• Vercel

• Licencia del proyecto

(back to top)

• HTML5
• CSS3
• JavaScript
• JSON Placeholder API
• Vercel
• Visual Studio Code
• Git

En este proyecto, se utilizaron las tecnologías mencionadas anteriormente para desarrollar la versión básica de una página web añadiendo algunas funcionalidades de la versión avanzada. {JSON} Placeholder se utilizó como una API de datos de ejemplo, Vercel se utilizó para el despliegue la web y Git se utilizó para el control de versiones del proyecto. También se utilizó Visual Studio Code como el entorno de desarrollo integrado (IDE) para escribir y editar el código.

(back to top)

• Crear repo en GitHub
• Conectar la carpeta local con GitHub
• Revisar el archivo Figma
• Conectar el proyecto con Vercel
• Modificar el Readme: añadir enlace de Vercel

• Estructurar Roadmap en el Readme
• Estructurar el html (navbar, header, main, 5 sections: partners, recent-projects, client-reviews, services, question-form y el footer)
• Crear html del archivo index.html
• Crear html del archivo project.html
• Crear html del archivo contact-us.html
• Añadir variables de estilos en la sección root del archvio Style.CSS
• Crear el CSS para index.html (navbar, header, main, partners, recent-projets y client-reviews)

• Corregir errores del CSS
• Extraer la información de la sección Recent Projects desde https://jsonplaceholder.typicode.com/
• Añadir enlaces al index.html
• Terminar el CSS de index.html
• Crear CSS del archivo contact-us.html
• Crear CSS del archivo project.html
• Extraer la información para project.html desde https://jsonplaceholder.typicode.com/

• Gestionar el envío del formulario Contact Us y hacer una post request a jsonplaceholder.
• Hacer el menu hamburguesa para movil.
• Configurar media queries para que sea responsive con pantalla movil y tablet (Media Queries).
• Crer animación: slider de fotos de las section partners.
• Arreglar pequeños detalles en el CSS.
• Crear menú hamburguesa para pantalla movil y tablet
• Implementar un scroll to top suave en el index.html

• Contact Us: enseñar al usuario con dom manipulation un mensaje de éxito o de error.
• Arreglar el menu hamburguesa
• Revisión final del proyecto
• Redactar el archivo Readme
• Crear presentación en diapositivas
• Presentar el proyecto

(back to top)

Angela Garcia Muñoz - LinkedIn

Correo electrónico: [email protected]

Project Link: GitHub Project

Web del proyecto: Vercel

Presentation Link: Insert here your presentation link

(back to top)

Quiero dar las gracias a Aleix, Diego y Jarko, los 3 profesores que nos han ido guiando y ayudando para poder terminar el proyecto.

A los compañeros de clase porque siempre están dispuestos a ayudar.

Y al SOC, ya que gracias a ellos he podido permitirme cursar el bootcamp en IronHack.

• Google Font Libraries

(back to top)

Este proyecto fue un desafío técnico en el cual enfrenté problemas para conectar mi carpeta local del proyecto con el repositorio de GitHub. Después de investigar y recibir ayuda, pude solucionar el problema al seguir los pasos correctamente.

Además, esta experiencia me permitió adquirir habilidades para conectar carpetas locales con repositorios en proyectos futuros.

Los errores mas grandes que he tenido ha sido a la hora de dar formato con CSS a las tarjetas de las secciones de Services y Projects, ya que no he conseguido del todo que queden bien. He usado Flex pero no he conseguido controlarlo del todo.

Este error me ha hecho perder mucho tiempo, en general el CSS me ha llevado más tiempo de lo esperado.

También he tenido problemas a la hora de plasmar los datos desde una API a la web. Para mi ha sido todo un reto JavaScript, porque aunque tenga la teoría me cuesta todavía poder implementarlo.

Debo profundizar más en JavaScript para que en futuros proyectos no tenga estos problemas o me encuentre de nuevo con este tipo de bloqueos.