Bootcamp de Desarrollo Web.

Descripción del proyecto

Esta es una lista de los proyectos en los que trabajarás durante tus estudios.

Los proyectos ayudan a que los estudiantes practiquen sus habilidades en tareas reales
de desarrollo web. Los proyectos están diseñados de manera que los estudiantes 

no sólo aprendan a desarrollar, sino también a respaldar sus proyectos a largo plazo.
Los ejercicios prácticos abarcan distintos grupos de etapas del desarrollo web:

Crear un diseño de sitio web con HTML y CSS

Proyecto 1 Página web de la Biblioteca de Triple Ten

Curso: HTML y CSS avanzados

Objetivo: En este proyecto, los y las estudiantes crearán un sitio web estándar de una
sola página de acuerdo con el brief. Este proyecto va a requerir que los
estudiantes usen las habilidades del Sprint 1, con especial interés en el
diseño flexbox, posicionamiento y semántica HTML.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad deÑ
del aprendizaje: · usar las funcionalidades del IDE®
· utilizar Git como un repositorio remoto para el proyecto®
· aplicar etiquetas semánticas de HTML5 para estructurar la página web®
· programar bloques del sitio web que se adapten al tamaño de la ventana
del navegador®
· posicionar elementos dentro de bloques de acuerdo con el brief®
· aplicar las propiedades básicas de CSS®
· depurar y autocomprobar su proyecto®
· seguir las reglas de los estilos de código CSS y HTML.

Proyecto 2 Página de inicio de la cafetería

Curso: HTML y CSS avanzados

Objetivo: En este proyecto, los y las estudiantes van a crear una página de inicio para
la cafetería de Triple Ten. A los alumnos se les pedirá que embeban videos
para diversificar el contenido de la página, agreguen animación y
 transiciones fluidas para que resalten los estados hover, conecten fuentes

de Google, y que organicen los archivos por BEM plana.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad de[

del aprendizaje: N hacer que tu página web tenga compatibilidad entre navegadores@

N aplicar fuentes que no sean estándar@

N embeber medios, widgets e incluso otra páginas en su página web@

N crear animaciones, transformaciones, gradientes y sombras con CSS@

N crear y aplicar estilo a formularios.@

N estructurar el proyecto de la manera más conveniente con BEM.

Desarrollar un sitio web responsivo

Proyecto 3 Alrededor de los EE.UU.

Curso: Diseño web adaptativo y trabajar con diseños

Objetivo: En este proyecto, los alumnos y alumnas crearán una página de inicio

responsiva basada en el diseño de Figma; una base para una página

interactiva donde los usuarios puedan agregar y eliminar fotos, dar "me

gusta" a las fotos de otros usuarios, y hacer algunos ajustes menores a su

propio perfil.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad de[

del aprendizaje: N trabajar con diseños en un editor gráfico llamado Figma@

N crear sitios web responsivos con Grid Layout@

N utilizar media queries (consultas multimedia) para establecer

parámetros para diferentes tamaños de pantalla@

N trabajar con ramas en Git.

Crear una aplicación front-end

Proyecto 4 Alrededor de los EE. UU., parte 2

Curso: JavaScript básico y trabajar con el navegador

Objetivo: En este proyecto, los y las estudiantes seguirán trabajando con el sitio web

"Alrededor de los EE. UU .". En esta sección, se les pide que creen una

ventana modal emergente y alternable para "Editar perfil".

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad de[

del aprendizaje: N usar los m é

todos básicos de JavaScript@

N manipular H
TML y CSS a trav é s del DOM en JavaScript@

N buscar elementos en el árbol DOM.

Proyecto 5 Alrededor de los EE. UU., parte 3 .

Curso: JavaScript básico y trabajar con el navegador

Objetivo: En esta sección, se pedirá a los y las estudiantes que agreguen una nueva

funcionalidad a su página web: agregar y eliminar fotos, dar "me gusta" a las

fotos de otros usuarios, crear una nueva sección para modalizar imágenes,

y garantizar la fluida apertura y cierre de elementos.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad dex

del aprendizaje: i trabajar con tipos de datos, condiciones, bucles, arrays y funciones en

JavaScriptZ

i agregar elementos al DOMZ

i borrar, agregar, copiar elementosZ

i crear controladores de eventosZ

i operar masivos y colecciones en JavaScriptZ

i implementar características de JavaScript tales como un bucle de

eventos, alcances, cierres, propagación (bubbling).

Proyecto 6 Alrededor de los EE. UU., parte 4

Curso: JavaScript básico y trabajar con el navegador

Objetivo: En este proyecto, a los alumnos y alumnas se les pedirá que agreguen

validación a todos los formularios del proyecto y que mejoren la UX de las

ventanas emergentes.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad dex

del aprendizaje: i trabajar con objetos en JavaScriptZ

i implementar controladores de eventos (agregar y eliminar detectores de

eventos, cancelar y delegar eventos)Z

i procesar datos de entrada utilizando eventosZ

i apicar validación de formulariosZ

i identificar y corregir errores.

Proyecto 7 Alrededor de los EE. UU., parte 5.

Curso: JavaScript aplicado

Objetivo: En esta sección, los y las estudiantes se enfocarán en refactorizar, crear

tarjetas y validación de formularios en clases separadas.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad dex

del aprendizaje: i crear clases con constructores y métodosZ

i implementar herencia de datos en POOZ

i agregar datos al etiquetado desde un arrayZ

i preparar clases para escaladoZ

i agregar código como módulos.

 Proyecto 8 Alrededor de los EE. UU., parte 6.

Curso: JavaScript aplicado

Objetivo: En esta sección, los y las estudiantes se enfocarán en refactorizar, crear

clases adicionales y acoplarlas juntas, y configurar el empaquetamiento y
construcción con Webpack.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad de~
del aprendizaje: n crear varias clases en un proyectox
n crear enlaces débiles y fuertes entre clasesx
n conectar clases a través de la función de callbackx
n construir un proyecto con Webpack.

Proyecto 9 Alrededor de los EE. UU., parte 7.

Curso: JavaScript aplicado

Objetivo: En este proyecto, los y las estudiantes desplegarán el sitio web "Alrededor
de los EE. UU.", a un servidor remoto.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad de~
del aprendizaje: n aplicar métodos de programación asíncrona (callbacks, bucles de
eventos, temporizadores, promesas)x
n conectar su sitio web a un servidor remoto a través de APIx
n usar métodos de POO más avanzados.

Construir una aplicación con React

Proyecto 10 Alrededor de los EE. UU., parte 8.

Curso: Crear una interfaz con React

Objetivo: En este proyecto, los y las estudiantes van a transferir el sitio web
"Alrededor de los EE. UU." a React. Se les pedirá que transfieran etiquetado
y estilos, y que configuren ventanas emergentes y tarjetas.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad de~
del aprendizaje: n implementar los conceptos básicos de Reactx
n construir aplicaciones de React con Create React Appx
n trabajar con CSS en un proyecto Reactx
n trabajar con la extensión DevTools de Reactx
n aplicar la sintaxis moderna de React, llamada hooks.

Proyecto 11 Alrededor de los EE. UU., parte 9

 Curso: Crear una interfaz con React

Objetivo: Esta vez se pedirá a los alumnos y alumnas que implementen formularios

de envío y otra información en API.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad den

del aprendizaje: a establecer rutas dentro de una aplicación con React RouterT

a usar estados en varios componentes al mismo tiempoT

a trabajar con estados globales a través de React Context y ReduxT

a obtener acceso a elementos DOM a través de refs.

Construir una aplicación full-stack

Proyecto 12 Alrededor de los EE. UU., parte 10.

Curso: Conceptos básicos del back-end

Objetivo: En esta sección, a los y las estudiantes se les pedirá que agreguen

autenticación de usuario, ajusten la estructura de su proyecto para hacerlo

más modular, configuren un servidor que distribuirá contenido estático, y

comiencen a crear su propia API.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad den

del aprendizaje: a aplicar los conceptos básicos de la ingeniería del lado del servidor con

Node.jsT

a desplegar el back-end en una máquina remota mediante Express.js;

Proyecto 13 Alrededor de los EE. UU., parte 11

Curso: Conceptos básicos del back-end

Objetivo: En esta sección, se pedirá a los y las estudiantes que construyan una API

RE ST para su proyecto y que la conecten a la base de datos.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad den

del aprendizaje: a crear una API RE STT

a conectarse a MongoD B a través de J

ava S criptT

a interactuar con la base de datos a través de la aplicaciónT

a aplicar expresiones regulares de Java S cript.

Proyecto 1 4 Alrededor de los EE. UU., parte 1 2

Curso: Conceptos básicos del back-end

Objetivo: En esta sección se pedirá a los y las estudiantes que implementen el

registro y la autorización para su aplicación de React.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad deR

del aprendizaje: = configurar la autenticación y autorización en el back-end5

= desarrollar la autenticación front-end con React5

= trabajar con el almacenamiento de datos del navegador5

= configurar la seguridad y las pruebas automatizadas.

Proyecto 15 Alrededor de los EE. UU., parte 13

Curso: Conceptos básicos del back-end

Objetivo: En esta sección, se pedirá a los y las estudiantes que conecten el lado del

cliente al lado del servidor de la aplicación, escriban el manejo de errores

centralizado y desplieguen el proyecto.

Resultados
Al completar el proyecto, el o la estudiante demostrará la capacidad deR

del aprendizaje: = implementar el manejo centralizado de errores5

= emitir y conectar un certificado SSL5

= agregar pruebas de caída del servidor5

= desplegar el back-end al servidor remoto.

Proyecto final Para su proyecto final, los y las estudiantes podrán elegir entreR

êò Construir una aplicación con back-end en React usando una API third-

partí

¿ò Desarrollar una aplicación full-stack usando una API personalizada.