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
[email protected]
Antonio Peña
[email protected]
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
[email protected]
Antonio Peña
[email protected]
Breakout Rooms
