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.

El link de la página que te compartiré, contiene una diversa colección de patrones que pueden ser usados tanto para el diseño de una página completa como para el diseño de un componente pequeño (así como lo hablamos en nuestra clase de: ¿Cuándo usar Flexbox y cuándo usar CSS Grid?).

Adicionalmente, en esta página podrás encontrar la explicación, tips, el chequeo de compatibilidad usando Feature Queries (que lo veremos más adelante en el curso), y las técnicas usadas para crear cada patrón.

Link: https://gridbyexample.com/patterns/

Te veo en la siguiente clase, no sin antes recordarte dos cosas:

  • Me alegra mucho que personas como tú estén leyendo esto. ¡Eso quiere decir que eres una persona que Nunca Para de Aprender y te felicito enormemente por eso!
  • Cualquier duda, por mínima que sea, ¡escríbela en los comentarios!

Bye ❤️

Aportes 41

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

excelente material para tener como referencia!

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

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

Yeah. Never stop learning ❤

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

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

que bonito mensaje

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

Muy buen enlace.

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

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