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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Qué son los Modern CSS Layouts?

12/28
Recursos

Aportes 24

Preguntas 0

Ordenar por:

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

Hoy en día existe una mejor opción a Object Oriented CSS, y se llama Storybook, aquí hay una → guía de como instalarlo y usarlo ← hecha en youtube por un profesor de platzi → Sacha Lifszyc ←

📗 ¿Qué son los Modern CSS Layouts?

<h4>Apuntes</h4> <h4>¿Qué es Layout?</h4>
  • Layout viene del inglés el cual significa diseño
  • Colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas

  • Cuando hablamos de Modern CSS Layouts es un concepto de hace más de 10 años
  • Características de la web en 2010:
    • Progresivamente mejorado
    • Adaptable a diversos usuarios
    • Modulares y eficientes
    • Tipográficamente ricos
<h4>Progresivamente mejorado</h4>
  • Base sólida e ir añadiendo estilos complejos para aquellos navegadores que pudieran soportarlo
  • En ese momento la compatibilidad entre navegadores era notorio
<h4>Adaptable a diversos usuarios</h4>
  • Al tener una gran cantidad:
    • La amplia gama de navegadores
    • Dispositivos
    • Resoluciones de pantalla
    • Tamaños de fuente
    • Tecnologías de asistencia
  • Se pretendía llegar de una manera óptima a todos
<h4>Modulares y eficiente</h4>
  • El CSS se pueda dividir en fragmentos que funcionan de forma independiente para crear componentes de diseño que se pueden reutilizar de forma independiente.
  • Se hablaba de un framework que permitiera a los desarrolladores escribir código frontend modular rápido, fácil de mantener y basado en estándares.

  • Muchas de esas cosas son las que deseamos lograr en la actualidad
  • CSS nació en 1996 (lanzamiento inicial)
    • Basado en un diseño de revista
<h4>Así fue como:</h4>
  1. Se idearon un modelo de diseño “basado en marcos” (“frame-based” layout model) en 1996
  2. Luego, lanzaron el “Advanced Layout Module” en 2005
  3. Que luego, pasó a ser “Template Layout Module” en 2016
  • Es decir que siempre se ha deseado lo mismo como tener control en:
    • Columnas
    • Filas
    • Tipografías
    • Contenido organizado (Header, Footer, …)

Básicamente el layout CSS ha cambiado drásticamente, así como la forma en que desarrollamos la interfaz de nuestros sitios

  • Ahora tenemos una opción real en términos de los métodos de diseño que usamos en CSS para desarrollar nuestros, sitios, lo que significa que a menudo tenemos que elegir qué enfoque tomar.
  • Como desarrolladores debemos asegurarnos la comprensión actual del layout esté actualizada
  • Veremos diferentes layouts y formas de construirlos

les quiero compartir un editor de codigo es https://codesandbox.io/ es similar a visual estudio code y lo de bueno de este editor ustedes pueden trabajar hasta de una tablet, espero que les sirva saludos.

Sugerencia: Menos pantallazos y mas codigo practico. En lo personal, no me ha gustado mucho este curso y el anterior de Grid, siento que pudieron haberlo hecho mucho mejor

Me esta gustando bastante el CSS Grid pero, me esta doliendo bastante. Necesito realizar ejercicios con la profesora para entender como maquetar el codigo de manera correcta. 😭

Que hermosos tiempos en donde me entretenía cambiando la tipografía a Comic Sans MS ❤️… JAJAJA, me encanta porque antes se usaban muchas ténicas para lograr esos layouts, y ahora con CSS Grid es absurdamente fácil hacerlo, por eso es que se dice que CSS Grid es una herramienta poderosa!

me da la impresion de que la profesora estefany era la chica de los plumones en el colegio jajajajaja

Les recomiendo mucho ver el curso de CSS GRID en realidad es un excelente complemento a este.

<h3>Modern CSS layouts</h3>

El layout es el diseño que tenemos, de como colocamos nuestros elementos su organización. Modern CSS layouts es algo que tiene 10 años, igual usaban HTML5 y CSS3, y en 2010 había ciertas características que se requerían como:

  • Progresivamente mejorando: Una base solida de CSS y con base se pueda construir lo demás.
  • Adaptable a diversos usuarios: Que se pueda ver en diferentes tipos de navegadores y que sea responsive.
  • Modulares y eficientes: Tener pequeños componentes y de ahí fueran creciendo los demás y se puedan reutilizar. Antes usaban frameworks de Object Oriented para CSS para tener un código rápido, fácil de mantener y basado en estándares.
  • Tipográficamente ricos: Había muchas tipos de tipografías.

Las cosas que querían lograr antes es igual a lo que queremos ahora, la idea de CSS grid lleva años desarrollándose la idea de tener un layout basado en filas y columnas y en 2017 esa idea se concreto. Queríamos tener la misma estructura para layouts pero las cosas van evolucionado y mejorando y ahora podemos tener mejores y más sencillos layouts.

hi5 ?, ya me había olvidado de esa página, es más no puedo creer que aún existe jaja.

wordart… vaya, han pasado mas de 15 años

Es motivante saber que estamos en el comienzo de algo enorme, y que estaba siendo esperado hace tanto.

Hay que darle!

Era divertido lo personalizable que era HI5 😦

cuando diseño generalmente no uso aside 😅

⭐️ Me encanta que profundicen en las bases !! ⭐️

👌

cuando solo se requerian 128 mb de memoria para andar el windows 95, ahora se queda corto windows 10 con 8gb de ram 🥴🥴🥴🥴

Css grid y flexbox rulz

Me hiciste acordar de los titulos vieejos de word art , siempre los usabamos en nuestros trabajos

La acabo de descubrir y debo decir que me encanta la nueva sección de Clases relacionadas 😀

Que bien que nací justo en el auge de tecnologías como CSSgrid.

Vaya. siempre se a querido lo mismo lo que ha mejorado es la herramienta para hacerlo. 🤔

OMG columnas inteligentes y JQuery? Menos mal llegaron CSS Grid y Flexbox … They are magic! ❤️