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 45

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!

excelente material para tener como referencia!

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

Yeah. Never stop learning ❤

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

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

que bonito mensaje

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!!!