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

CSS feature queries: @supports

27/28
Recursos

Aportes 12

Preguntas 2

Ordenar por:

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

@supports se me hace muy interesante para las reglas de las nuevas actualizaciones de css3…
Por ejemplo:

@supports (grid-template-columns) and (not (subgrid)) {
	// Creas las columnas del padre dentro del hijo
}

//Si soportas grid-template-columns y no soportas subgrid, interpreta el contenido de las llaves

@supports (subgrid) {
	grid-template-columns: subgrid;
}
//Si soportas subgrid interpreta el contenido de las llaves

Esto fue un ejemplo que se me ocurrió, también se podría utilizar después con el grid-template-rows:massonry o con otras cosas nuevas de css 😃

sali muy triste de este curso 😦

el @supports lo veo mas como una condición, pero desde mi punto de vista no le encuentro mucha utilidad, talvez por que no eh encontrado donde aplicarlo, pero con solo pensarlo sigo llegando a la misma conclusión, y es que, si el sabemos que tenemos algo que el navegador no lo va a tomar, por que aplicarlo?, seria mas a conveniente ver que cosas si con compatibles con el navegador y trabajar con ello, nos ahorraríamos mas código de paso xD

Ohhh que genial, aunque no le veo mucho uso, es decir, si el navegador no soporta una característica, por más que la pongas no la va a tomar en cuenta no? ¿Entonces para qué serviría el @support? ¿Cuál sería la diferencia entre usarlo y no usarlo? 🤔

Es una paradoja usar esta herramienta porque no todos los navegadores son compatibles! con @supports

q curso mas malo hubieran puesto historia de css y flexbox

Vengo de estudiar ingles en la escuela de ingles de platzi! 😄 solo me gustaría aclarar que Features se pronuncia con la T, si se pronuncia con la SS como lo hace Estefany, tendríamos Fissures lo cual significa Fisuras o Grietas.

Pues al igual que muchos, tampoco lo veo mucho sentido utilizar @supports en CSS a menos que se estén haciendo diferentes pruebas en diferentes navegadores pero por ejemplo, si existe una propiedad que solo funciona en Firefox y no en los demás, esa propiedad es mejor no utilizarla hasta que sea un poco más global, no le veo sentido poner estilos sabiendo que solo se verán ejecutados en un navegador.

Hay dos tipos de personas en estos cursos.
Las que no se dejan influenciar y se dan cuenta de lo nada practico que es este curso y que no les servirá nada para ser desarrolladores web. Y los ignorantes que dicen que les va bien y no se preocupan, pero que ya veran cuando estén frente al código.

Me parece muy útil para tener en cuenta las distintas compatibilidades.

.