En este codelab, tendrás todas las secciones necesarias para que puedas realizar el proyecto final de Programación en HTML. Todo el contenido de este codelab debe usarse como guía para que puedas desarrollar tu propia propuesta, ya sea tu portafolio u otra opción de página.

Template Inicial

Esta primera sección llamada seccion-0-template contiene lo necesario para poder iniciar con el proyecto, un archivo index.html inicial, una carpeta css con un archivo style.css que contiene los estilos iniciales explicados en clase y una carpeta img con todas las imágenes que usaremos en el portafolio

Puedes descargar esta sección desde github aquí: seccion-0-template.

Al finalizar la descarga y abrir el archivo index.html en el navegador, verás una página solamente con un color de background.

Nota

Ten en cuenta que esta es la única sección que debes descargar, aunque el resto de secciones también están en GitHub, solo debes usarlos como guía para ir codificando, parte por parte, tu proyecto.

Header y Nav

En sección llamada seccion-1-header-nav agregamos la barra de navegación y el encabezado index.html, además se agrega su respectivo css en el archivo style.css.

Puedes ver esta sección en github aquí: seccion-1-header-nav.

Al finalizar esta sección y abrir el archivo index.html tendrás la página con la barra de navegación y el header finalizados.

Enlaces a tus Proyectos, WhatsApp y Footer

En sección llamada seccion-2-proyectos-footer agregamos los enlaces a los diferentes proyectos del portafolio, la sección del botón de WhatsApp y el footer al index.html, se agrega también el respectivo css en el archivo style.css.

Puedes ver esta sección en GitHub aquí: seccion-2-proyectos-footer.

Al finalizar esta sección y abrir el archivo index.html tendrás la página con la página de Home finalizada.

Página de Contacto

En sección llamada seccion-3-contact agregamos la página de contacto contact.html, en esta página se hace uso del elemento iframe para agregar un mapa de Google Maps, hacemos uso de los iconos de fontawesome y hacemos uso de los formularios con el elemento form, se agrega también el respectivo css en el archivo style.css.

Puedes ver esta sección en GitHub aquí: seccion-3-contact.

Al finalizar esta sección y abrir el archivo contact.html tendrás la página con la página de contacto finalizada.

Página Acerca de

En la sección llamada seccion-4-about agregamos la página de Acerca de about.html, en esta página agregaremos nuestras skills y también hacemos uso del elemento iframe para agregar un video de YouTube, en esta sección también agregamos el respectivo css en el archivo style.css.

Puedes ver esta sección en github aquí: seccion-4-about.

Al finalizar esta sección y abrir el archivo about.html tendrás la página con la página de Acerca de finalizada.

Páginas Individuales de Proyectos

En la sección llamada seccion-5-projects agregamos las páginas individuales de cada proyecto, en este caso serán solo 3 proyectos: project-1.html, project-2.html y project-3.html, ya que en la página index.html solo tenemos enlaces a estos 3 proyectos, pero eres libre de agregar las páginas de proyectos que sean necesarios. Aquí también agregamos el respectivo css en el archivo style.css.

Puedes ver esta sección en GitHub aquí: seccion-5-projects.

Al finalizar esta sección, podrás abrir el index.html y navegar a cada proyecto o podrás abrir cada uno de ellos de forma individual.

Página Responsive

Esta es la última parte del proyecto, la sección llamada seccion-6-responsive, aquí agregamos en la carpeta css el style-responsive.css, donde tendremos todo el CSS necesario para que nuestra página tenga responsividad en dispositivos móviles, aquí usaremos media queries @media para agregar algo de estilos en ciertos tamaños.

Puedes ver esta sección en GitHub aquí: seccion-6-responsive.

Al finalizar esta sección, todas las páginas creadas hasta el momento serán responsivas.

Nota

Ten en cuenta que para que estos estilos sean aplicados debes vincularlos en cada una de las páginas creadas hasta el momento y en las que vayas a adicionar

<link rel="stylesheet" href="css/style-responsive.css" />

¡Con esto ya tendrás finalizado el proyecto! Pero recuerda que esto es una base sobre la que estaremos trabajando en clase y que debes personalizar con tus propias imágenes, tu paleta de colores, textos y descripciones.