Descubre qu茅 ha cambiado en nuestro medio

1

Todo sobre el dise帽o de p谩ginas web acaba de cambiar

Conceptos que forman parte del dise帽o en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Din谩mica: 驴C贸mo se ver铆a?

驴Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

驴Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Din谩mica: 驴Qu茅 usar铆as? (Parte 1)

10

Din谩mica: 驴Qu茅 usar铆as? (Parte 2) + Reto

11

驴Cu谩ndo usar Flexbox y cu谩ndo usar CSS Grid?

Modern Layouts con CSS Grid

12

驴Qu茅 son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Dise帽o web para desarrolladores

16

Din谩mica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de dise帽o UI/UX: Fase de inspiraci贸n y creatividad

19

Wireframes y comunicaci贸n visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del dise帽o al c贸digo

22

Primeros pasos y estructura inicial

23

Ubicaci贸n y creaci贸n de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: 驴existir谩 CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al d铆a

Patrones para usar como punto de partida

13/28

Lectura

隆Hola! Para comenzar con este m贸dulo de Modern Layouts con CSS Grid, quiero que revisemos algunos patrones para usar como punto de partida.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 47

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

No me esperaba el final jaja, #NuncaParemosDeAprender!!!
.
Listo para el siguiente m贸dulo:3!

Yo quiero alg煤n d铆a hacer algo as铆: https://staratlas.com/ jaja :麓3 pero por lo que veo es puro javascript me imagino que utilizan de alg煤n modo el eje z :0

excelente material para tener como referencia!

Muchas gracias por los ultimos dos comentarios 馃挌
De verdad, se sintio muy bonito.

Yeah. Never stop learning 鉂

Siempre es bueno leer c贸digo para comprenderlo. Uno se nutre mucho.
Son muchas las maneras que existen para hacer exactamente lo mismo!

me devolvi a este curso a ver si hay un enlace al curso de animaciones que estaba haciendo y ya lo bajaron, ojala @teffcode lo actualice pronto

Sinceramente, nunca pens茅 que un tema como CSS que no es tan dificil de manejar cuando se esta aprendiendo, tenga m谩s complejida, teor铆a y mucho campo de fondo. Muchos de los conceptos que he visto al rededor de los cursos que he tomando con la profe Stefany realmente que no los conoc铆a, y que en serio es muy util. No hay que tomar todo a la ligera por que este sea f谩cil, de todo se puede sacar mucho jugo de conocimiento, y me alegra de que CSS no sea la excepci贸n

que bonito mensaje

## **Practicando el Modern Layout N掳 07 (RAM (Repeat,Auto,MinMax)) combinado con el N掳 08 (Line Up)** ## ![](https://static.platzi.com/media/user_upload/1-ab8310d1-77bb-427e-b610-5558fe5960ec.jpg) ![](https://static.platzi.com/media/user_upload/2-5ceb57d7-13c3-452b-ba9c-48be9a08be8d.jpg) ![](https://static.platzi.com/media/user_upload/3-3d5b2048-8c37-4632-b902-e5ca63ace0e8.jpg) ![](https://static.platzi.com/media/user_upload/4-65e4569c-e2e1-4806-8a91-ad864769f753.jpg) 猸怣ira el tutorial en tiktok que he elaborado: <https://www.tiktok.com/@raulsanchezcode/video/7325549206943304965>

Super geniales sus clases Miss.

Nunca perriemos de aprender 馃槂

Gracias por el material

El comentario del final me ha motivado, y eso tambi茅n habla muy bien de la calidad de persona que es Estefany, ahora vemos que no solo es muy profesional en su trabajo, sino adem谩s que esta comprometida y le importa que sus alumnos comprendan y sigan adelante. Nos vemos en el futuro. Gracias Teff !

Excelente Link, gracias por compartirlo, ser谩 de mucha utilidad

Muy buen enlace.

Gracias por la p谩gina recomendada!

隆Una supergu铆a!
G R A C I A S!

Excelente recurso

Me gusto!

Y las plantillas, cuentan con su c贸digo y todo, excelente p谩gina gracias por recomendarnosla.

me gusta este curso, te proporciona herramientas que perfecciona tus conocimientos en css grid y flexbox, adem谩s de otros temas de dise帽o

Muchas Gracias por el recurso compartido Teacher 馃挏A seguir aprendiendo 馃槃

Justo lo que necesitaba. :3

excelente material

Increible 馃槃

Buenos conocimientos

Los recursos que comparten son muy buenos. Gracias por eso.

Un peque帽o aporte de mi parte para los que quieran aprender a trabajar grid en profundidad : https://codepip.com/games/grid-garden/
y otro peque帽o aporte, para los que quieran tambi茅n aprender a manejar todas las funciones de flexbox:
https://flexboxfroggy.com/#es
Saludos, y suerte. Estoy atento a cualquier duda que surja.

Muy buena la pagina

馃憦馃憦馃憦馃憦 Excelente buen aporte, gracias teffy

Genial, excelente recurso.

Solo quiero mencionar que me encanta este curso, y acabo de ver que el 30 de abril sale el nuevo curso de COBOL.

Muchas gracias, el material me ayudoa entender mucho mas

Muy bien explicado, le felicito Estefany

Es incre铆ble est谩 web

Muchas gracias por compartir el sitio, realmente he aprendido montones

Me fascina

El sitio web que comparte est谩 super genial, muchas gracias por compartirlo.

No es una duda pero cabe destacar que en verdad es una de las mejores profes con la que he aprendido en platzi muchas gracias Teff!

Hola, compa帽eros.
En el patr贸n de As many as will fit with some items spanning two rows en el elementos que es m谩s alto se le aplica esta propiedad: grid-row-end: span 2;
驴Qu茅 significa el valor span?

Quien no aprende con esta instructora, excelente 馃槂

,

z

Amen!

Mis sinceras felicitaciones a la profe y al equipo de platzi, este curso como el anterior de CSS Grid Layout, se nota el esfuerzo que se expresa en la calidad del curso y la documentaci贸n.
#NuncaParemosDeAprender!!!