.

1. Lineamientos del Proyecto Final
Del Bootcamp Frontend

2. 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.

3. La importancia del
proyecto.

4. 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.

5. El proyecto busca que
comiences a construir un
portafolio que puedas
presentar al aplicar para
empresas que busquen
Frontend Developers

6. 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.

7. Acerca del
proyecto

8. 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

9. Landing Page

10. 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.

11. 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.

12. La página deberá ser visible en
internet usando alguno de estos
servicios:
GitHub Pages
Servidor con dominio

13. 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

14. Una landing page que
incluya interactividad
con JavaScript

15. 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.

16. 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.

17. Consideraciones técnicas:
● Uso de Javascript para enriquecer el sitio, manipular el
DOM, o añadir animaciones.

18. La página deberá ser visible en
internet usando alguno de estos
servicios:
GitHub Pages
Servidor con dominio

19. 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

20. 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.

21. Ejemplos
● Un sitio web con los últimos anuncios de películas de
Disney
● Juegos interactivos web

22. Una web app con
JavaScript.

23. 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.

24. 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.

25. 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.

26. 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

27. Consideraciones

28. 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.

29. 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.

30. Entrega del
proyecto

31. 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.

32. 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.

33. Tips de documentación

34. Fecha de entrega

35. 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.

36. Enlace para entregar

37. ¡Mucho éxito!