2022

Sesión 3

Desarrollo Web Full Stack

 Web Full Stack

0 1 2 3 4 5 6 7 8 9
 Web Full Stack

Iniciamos y Para escuchar Mantengamos

Es momento
Participemos finalizamos a mejor apaguemos nuestra cámara
de Codear
tiempo el micrófono encendida
 Web Full Stack

Dudas y progreso de
la semana

Responsive design
 Web Full Stack

Daily
Pongámonos al día
Permite la alineación y
distribución de espacio
entre los elementos de
un contenedor.
Indica el eje en el que se ordenarán los elementos
Indica el comportamiento
de los elementos cuando
su tamaño en conjunto es
mayor al tamaño de la fila
flex-flow: flex-direction flex-wrap

Atajo para definir

flex-flow: flex-direction el flex direction y
el flex wrap.
flex-flow: flex-wrap
Define el orden en que se ordenarán los elementos
 Web Full Stack

Break
Volvemos en 15 min
https://codepen.io/enxaneta/full/adLPwv

https://flexboxfroggy.com/#es
 /ucampaprende

“Lo importante es el camino y en él, caer,

levantarse, insistir y aprender”

Ariel Penna
ariel.penna@ucamp.utel.edu.mx

Antonio Peña
antonio.pena@ucamp.utel.edu.mx
 2022

Sesión 3

Desarrollo Web Full Stack

 Web Full Stack

0 1 2 3 4 5 6 7 8 9
 Web Full Stack

Iniciamos y Para escuchar Mantengamos

Es momento
Participemos finalizamos a mejor apaguemos nuestra cámara
de Codear
tiempo el micrófono encendida
 Web Full Stack

Dudas y progreso de
la semana

Responsive design

Indicaciones

Encuestas y avisos
Permite la alineación y
distribución de espacio
entre los elementos de
un contenedor de forma
bidimensional.
Define las columnas del grid.
Define las filas del grid
Define el área que tomarán los elementos del grid
Define la separación
entre las columnas
del grid.
Define la separación
entre las filas del
grid.
Define la separación
entre las filas del
grid.
 Web Full Stack

Break
Volvemos en 15 min
Entre todos vamos a hacer la
tarea de la sesión pasada
con displays Flexbox/Grid.

https://www.spotify.com/mx
/premium/
1. Elegir de 10-15 imágenes.

1. Definir cuántas imágenes

se desea mostrar (fila,
columna, área).

1. Analizar con qué display

es mejor realizarlo.

1. Agregar los estilos

necesarios
1. Maquetar el header de spotify con
Flexbox/CSS Grid/Bootstrap.

https://www.spotify.com/mx/
Ejercicios interactivos:

https://flexboxfroggy.com/#es
http://www.flexboxdefense.com/

https://cssgridgarden.com/#es

https://learngitbranching.js.org/?locale=es_MX
Explorar los componentes
disponibles en Bootstrap:

https://getbootstrap.com/docs
/5.1/components/accordion/
 Nombre URL

A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Flexbox https://www.w3schools.com/css/css3_flexbox.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_
Basic Concepts of Flexbox Flexible_Box_Layout/Basic_Concepts_of_Flexbox

A complete Guide to Grid https://css-tricks.com/snippets/css/complete-guide-grid/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_
CSS Grid Layout Grid_Layout
1. Consultar y estudiar el repositorio de tu
U Class 4

2. Revisar a detalle la rúbrica del proyecto

para desarrollarlo.

3. Revisar cuenta U Camp y Microsoft Teams

4. Asesorías grupales e individuales

5. Contesta la encuesta para feedback y

registro de asistencia ;)

*Adjuntar código qr de cada cohort*

Si hay temas pendientes (pagos,

proyectos, entregas extemporáneas)
enviar correo a staff.
 /ucampaprende

“Lo importante es el camino y en él, caer,

levantarse, insistir y aprender”

Ariel Penna
ariel.penna@ucamp.utel.edu.mx

Antonio Peña
antonio.pena@ucamp.utel.edu.mx
Breakout Rooms