Lineamientos del Proyecto Final Del

Bootcamp Frontend
Llegó el momento de poner en
práctica tus conocimientos, es hora de
crear un proyecto que condense tus
nuevas habilidades en HTML, CSS, y
JavaScript.
La importancia del
proyecto.
El proyecto es requerimiento
indispensable para culminar el
Bootcamp y recibir tu certificado
digital por haber concluido
satisfactoriamente el programa, sin
embargo, el beneficio más grande es el
que traerá para tu carrera profesional.
El proyecto busca que comiences a
construir un portafolio que puedas
presentar al aplicar para empresas que
busquen Frontend Developers
Consideraciones
● Plasma tu creatividad y personalidad, no hagas un proyecto genérico, haz
uno que te distinga y por el que destaques en la revisión de perfiles para
contratar.

● Elige un proyecto propio

● Haz algo funcional, en lugar de un proyecto demo

● Considera el tiempo para documentación.

Acerca del proyecto
El proyecto se trata de una página web que
utilice HTML, CSS, y JavaScript y que
entre en una de estas 3 categorías:

● Una landing page

● Una landing page que incluya
interactividad con JavaScript
● Una web app con JavaScript
Landing Page
Una Landing Page es una página
sencilla para mostrar información o
algún mensaje.

En este proyecto buscamos que

destaques tu conocimiento de HTML
y CSS, no se espera que los proyectos
de esta categoría utilicen JavaScript.
Consideraciones técnicas:

● Uso de etiquetas semánticas, así como consideraciones de accesibilidad

para el sitio web.
● Para CSS esperamos que apliques algún sistema de layout entre Flexbox
y Grid, o ambos.
● Que uses imágenes para enriquecer tu sitio web.
● Que la información sea clara y legible, considera contraste de colores,
tamaños de fuente y tipografías legibles.
La página deberá ser visible en internet
usando alguno de estos servicios:

GitHub Pages
Servidor con dominio
Ejemplos

● Un sitio web para mostrar los 5 frameworks más populares de JavaScript

● Un sitio web para informar la importancia de la accesibilidad en el
desarrollo web.
● Un sitio web con los últimos anuncios de películas de Disney
Una landing page que incluya
interactividad con JavaScript
Una Landing Page es una página
sencilla para mostrar información o
algún mensaje.

En este proyecto buscamos que

además de demostrar tu conocimiento
en HTML y CSS uses JavaScript para
enriquecer el sitio, manipular el DOM,
o añadir animaciones.
Consideraciones técnicas:

● Uso de etiquetas semánticas, así como consideraciones de accesibilidad

para el sitio web.
● Para CSS esperamos que apliques algún sistema de layout entre Flexbox
y Grid, o ambos.
● Que uses imágenes para enriquecer tu sitio web.
● Que la información sea clara y legible, considera contraste de colores,
tamaños de fuente y tipografías legibles.
Consideraciones técnicas:

● Uso de Javascript para enriquecer el sitio, manipular el DOM, o añadir

animaciones.
La página deberá ser visible en internet
usando alguno de estos servicios:

GitHub Pages
Servidor con dominio
Cómo puedo usar JavaScript

● Uso de web APIs para video, audio, o almacenamiento de información.

● Integración de servicios externos, por ejemplo un mapa de Google Maps.
● Manipulaciones del DOM
● Validaciones en formularios de contacto
Ejemplos

● Portafolio personal
● Proyecto para alguna empresa
● Un sitio web para mostrar los 5 frameworks más populares de JavaScript
● Un sitio web para informar la importancia de la accesibilidad en el
desarrollo web.
Ejemplos

● Un sitio web con los últimos anuncios de películas de Disney

● Juegos interactivos web
Una web app con JavaScript.
Se trata de una web app que utilice
web APIs y sobre todo JavaScript
como lenguaje de programación para
crear un sitio enteramente interactivo.
Consideraciones técnicas:

● Uso de etiquetas semánticas, así como consideraciones de accesibilidad

para el sitio web.
● Para CSS esperamos que apliques algún sistema de layout entre Flexbox
y Grid, o ambos.
● Que uses imágenes para enriquecer tu sitio web.
● Que la información sea clara y legible, considera contraste de colores,
tamaños de fuente y tipografías legibles.
Consideraciones técnicas:

● Uso de Javascript para enriquecer el sitio, manipular el DOM, o añadir

animaciones.
● Sobre todo, que utilices web APIs de JavaScript:
○ Fetch para consultar datos de APIs externas
○ API de canvas para dibujar gráficos
○ API de audio o video para acceder al micrófono o la cámara
○ APIs de almacenamiento como localStorage
○ APIs de ubicación para trazar puntos en algún mapa.
Ejemplos

● Un juego 2D
● Una app tipo Paint
● Una app de fotografías
● Una app para guardar notas o pendientes
● Una app para guardar puntos clave de un mapa
Consideraciones
Consideraciones

● Solo debes entregar un proyecto, en cualquier categoría que decidas.

● Recuerda elegir un proyecto retador que exija tus nuevos conocimientos y
requiera que sigas investigando y aprendiendo.
Consideraciones

● Apóyate de tus compañeros y profesores, postea tus dudas en el canal de

Telegram.
● No importa si no cumples con todos los objetivos o requisitos, si al final
no pudiste lograr tus objetivos, entrega todos los avances que tengas.
Entrega del proyecto
El proyecto debe ser entregado
funcionando en un servidor web, esto
quiere decir que exista un link para
visitarlo.

El código del proyecto debe ser

subido a GitHub para que el equipo de
evaluación de tutores pueda revisarlo.
PDF - Documentación

● Información acerca del proyecto, quiénes trabajaron en él.

● Desafíos que se presentaron en el desarrollo del proyecto y cómo los
resolvieron.
● Puntos clave a destacar del proyecto, partes del código de los que estén
orgullosos y quieran resaltar para el equipo de evaluación.
● Instrucciones especiales para ejecutarlo si es que existan.
Tips de documentación
Fecha de entrega
La fecha para entregar el proyecto será
el 29 de Mayo

Recuerda que, si para la fecha de

entrega no has logrado todos los
objetivos que trazaste o que esperabas
lograr, no te preocupes, entrega todos
tus avances.
Enlace para entregar
¡Mucho éxito!