|
1 | | -# Entrega Proyecto CSS-HTML |
| 1 | +# Entrega Proyecto de CSS y HTML |
2 | 2 |
|
3 | 3 | Este proyecto fue creado con el fin de ejercitar y demostrar los conocimientos adquiridos en clases virtuales sobre HTML y CSS. |
4 | 4 |
|
5 | | -## Descripción |
| 5 | +## El proyecto abarca los siguientes aspectos clave: |
6 | 6 |
|
7 | | -El contenido de este proyecto incluye: |
| 7 | +- Implementación de **HTML** estructurado y su interacción con el **DOM**, acompañado de estilos en cascada mediante **CSS**. |
| 8 | +- Uso adecuado de la **semántica** de las etiquetas HTML, combinado con reglas CSS que mejoran la accesibilidad y el rendimiento. |
| 9 | +- Desarrollo de **media queries** para garantizar un diseño **responsivo** y adaptable a diversas resoluciones de pantalla. |
| 10 | +- Creación de **animaciones** y **transiciones** dinámicas utilizando **CSS** para mejorar la experiencia de usuario. |
| 11 | +- Personalización de animaciones mediante el uso de **keyframes**, logrando efectos visuales únicos. |
| 12 | +- Diseño de un **layout responsivo** mediante el uso de **grids** en CSS para una estructura flexible y escalable. |
| 13 | +- Aplicación de una correcta **jerarquía CSS**, asegurando la correcta estilización y coherencia visual de los elementos. |
| 14 | +- Análisis del comportamiento de las diferentes **etiquetas HTML** y su interacción con **CSS** para optimizar la presentación del contenido. |
| 15 | +- Implementación de **inputs** con **validaciones** eficientes, asegurando la correcta interacción del usuario con los formularios. |
| 16 | +- Incorporación de **links** para la navegación a otros sitios web, mejorando la conectividad y accesibilidad. |
| 17 | +- Garantía de la **cohesión y limpieza del código**, con una estructura organizada que facilita el mantenimiento y la escalabilidad del proyecto. |
8 | 18 |
|
9 | | -- Uso de **HTML** y **CSS**. |
10 | | -- Aplicación de **semántica** adecuada entre etiquetas HTML y reglas CSS. |
11 | | -- Implementación de **media queries** para diseño responsivo. |
12 | | -- Creación de **animaciones** y **transiciones** con **CSS**. |
13 | | -- Uso de **keyframes** para animaciones personalizadas. |
14 | | -- Diseño de un **layout responsivo** utilizando **grids** en CSS. |
15 | | -- Aplicación de **jerarquía CSS** para estilizar correctamente los elementos. |
16 | | -- Estudio del comportamiento de las distintas **etiquetas HTML** y su interacción con **CSS**. |
17 | | -- Implementación de **inputs** y sus respectivas **validaciones**. |
18 | | -- Uso de **links** a otros sitios web. |
19 | | -- Cohesión y limpieza del código, con una estructura organizada. |
| 19 | +## Objetivo del Proyecto |
| 20 | +El objetivo principal de este proyecto es desarrollar un **portfolio** personal (o de un personaje de ficción), aplicando los conocimientos adquiridos en clase. La idea es crear una presentación interactiva y visualmente atractiva que muestre las habilidades y proyectos de nuestro personaje elegido, utilizando las tecnologías y prácticas aprendidas durante el curso. |
| 21 | + |
| 22 | +## Detalles del Proyecto |
| 23 | + |
| 24 | +- Se debe de crear un **header**, en el que los enlaces deben tener el estado `hover` suavizado con una transición. Estos links no son necesarios en la versión móvil. |
| 25 | +- Una sección con una descripción de **nosotros** y nuestras habilidades representadas mediante **barras de progreso**. Estas barras deben estar animadas utilizando **CSS**. |
| 26 | +- Un **banner** que deberá tener una imagen de fondo. En pantallas móviles, debe mostrarse otra imagen diferente (Implementar **media queries** o **Responsive images**). |
| 27 | +- Formulario de contacto mediante **inputs**. Todos deben tener tanto los tipos correctos como la validación HTML de cada campo: |
| 28 | + - **Nombre**, **Apellidos**, **Teléfono** (campos requeridos). |
| 29 | + - **Radio input** para responder a la pregunta "¿cómo me conociste?" (campo requerido): |
| 30 | + - Universidad |
| 31 | + - Keepcoding kick-off |
| 32 | + - Colegio |
| 33 | + - En GitHub |
| 34 | + - **Tag de GitHub** (Usar expresión regular `^@[^\s]+` para la validación - `@username`). |
| 35 | + - **Textarea** con más información del usuario (máximo 180 caracteres) (campo requerido). |
| 36 | + - **Checkbox** para el acceso a la **newsletter**. |
| 37 | + - Botones de **guardar** y **reset**. |
| 38 | +- **Footer** con enlaces a nuestras redes sociales mediante recursos externos. |
| 39 | +- Nueva página que contenga un **video** que se reproduzca automáticamente al entrar en la web y aparezca con una animación de **fadeIn**. |
| 40 | +- Crear una nueva página con un **grid** que muestre nuestros proyectos. |
20 | 41 |
|
21 | 42 | ## Tecnologías |
22 | 43 |
|
23 | | -Este proyecto fue desarrollado utilizando exclusivamente las siguientes tecnologías: |
| 44 | +Este proyecto fue desarrollado utilizando exclusivamente con las siguientes tecnologías: |
| 45 | + |
| 46 | +- **HTML**: Para la estructuración del contenido y la creación de la estructura de la página web. |
| 47 | +- **CSS**: Para el diseño y estilo visual de la página, asegurando una experiencia de usuario atractiva y coherente. |
| 48 | + |
| 49 | +## Instrucciones de Instalación y Uso |
| 50 | + |
| 51 | +### Requisitos de Software |
24 | 52 |
|
25 | | -- **HTML** |
26 | | -- **CSS** |
| 53 | +- **Git** (Requerido) |
| 54 | +- **SourceTree** (Opcional) |
| 55 | +- **Visual Studio** (Ejecutado en la versión 1.99.0) (Requerido) |
| 56 | +- **Live Server** (Addon de Visual Studio, Opcional) |
27 | 57 |
|
28 | | -##Instrucciones de instalación y uso |
| 58 | +### Descripción de los Programas |
29 | 59 |
|
30 | | -Para utilizar este proyecto, sigue estos pasos: |
| 60 | +- **Git**: Herramienta de control de versiones. Es imprescindible para clonar el repositorio. |
| 61 | +- **SourceTree**: Una herramienta visual para gestionar repositorios Git. Permite interactuar con Git de forma sencilla sin necesidad de utilizar la línea de comandos. |
| 62 | +- **Visual Studio**: Entorno de desarrollo integrado (IDE) necesario para ejecutar el proyecto. Asegúrate de utilizar la versión 1.99.0 para evitar problemas de compatibilidad. |
| 63 | +- **Live Server**: Extensión de Visual Studio que permite visualizar los archivos HTML de manera local en un navegador, mostrando los cambios en tiempo real. |
| 64 | + |
| 65 | +### Pasos para utilizar este proyecto |
| 66 | + |
| 67 | +1. Clona el repositorio de GitHub utilizando **SourceTree** o directamente con el siguiente comando mediante Git: |
31 | 68 |
|
32 | | -1. Clona el repositorio desde GitHub: |
33 | 69 | ```bash |
34 | | - git clone https://github.com/PabloSch26/HTML-CSS_Entrega.git |
35 | | -3. Abre el archivo index.html en Visual Studio Code. |
| 70 | + git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git |
| 71 | + |
| 72 | +2.1 Una vez clonado el repositorio, abre el proyecto en Visual Studio agregando el directorio del proyecto a tu espacio de trabajo. |
| 73 | + |
| 74 | +2.2 Abre los archivos index.html, proyect.html, 404.html y 500.html con Live Server para previsualizarlos en el navegador. |
| 75 | + |
| 76 | +### Notas |
36 | 77 |
|
37 | | -4. Usa el addon Live Server de Visual Studio Code para previsualizar el proyecto en tu navegador. |
| 78 | +- Asegúrate de tener correctamente instalados todos los programas necesarios antes de proceder con la ejecución del proyecto. |
| 79 | +- Si no deseas usar SourceTree, puedes clonar el repositorio directamente usando la terminal con el comando git clone. |
38 | 80 |
|
39 | 81 | ## Sin contribuciones ni licencias |
40 | 82 |
|
|
0 commit comments