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

Todo sobre el diseño de páginas web acaba de cambiar

1/28
Recursos
Transcripción

Aportes 73

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Que emoción esperaba con muchas ansia este curso.

¡Wuuuu!, ya me terminé el primero, vamos con el segundo 👀, que emoción poder tomar cursos con teff 💚

📖 Todo sobre el diseño de páginas web acaba de cambiar

<h4>Apuntes</h4>
  • El diseño gráfico en la web ha evolucionado significativamente dúrate los últimos 25 años
    • Inicialmente se tenía una paleta de 216 colores
    • Las tipografías eran limitadas
  • Con la llegada y avance de CSS ha mejorado la web
    • CSS Grid ⇒ nueva tecnología poderosa para crear layouts

Consejos de @teffcode

  1. Probar y jugar las nuevas características de CSS
  2. No construir los mismos diseños antiguos con las mismas tecnologías antiguas
  3. Descubre todo lo que ha cambiado
  4. No asumas que ya sabemos en qué se convertirá la web. O que ya lo hemos dominado todo.
  • No existe una forma “correcta” de hacer los diseños

Hola no quiero generar hate hacia nadie pues la plataforma me ha enseñado mucho y estoy muy agradecido pero este curso se queda corto para lo que se espera ver, y no es por la profesora pues esta muy capacitada para brindar un mejor contenido que sea teórico practico es decir que lo que se vaya viendo en los módulos se vaya aplicando hacia un proyecto final, como por ejemplo la maquetación de una web entera utilizando lo que se va aprendiendo, estoy de acuerdo que uno debe practicar por sus propios medios, pero hay otras plataformas donde pagas por aprender y de ahí no te tienes que salir porque realmente estas haciendo teoría y practica hacia un fin especifico, pero aqui toca ir a ver ejemplos a youtube o otras escuelas y no se porque hay q hacer eso si estoy pagando por estar aqui y aprender aqui.

Una persona que no sepa nada sobre Grid y Flexbox se queda corta y embolatada porque a pesar de que hay mucha teoría que es muy importante se queda pensando y como aplico esta teoría. En el curso anterior tambien es igual y hay muchas quejas de muchos usuarios.

Seria genial que como introducción y enganche al curso te digan que al final de este curso podrás hacer layouts como este y que salga la profesora y mueste una pagina hecha por ella con Grid y Flex asi sea basica y que eso sea a lo que nos lleve utilizando la teoria y la practica… Pero bro no todo es leer

OJala este curso valga la pena, los anteriores han sido un fracaso con la misma profesora.

Estaba esperando este curso! sin duda nos ayudará a crear diseños increíbles y posicionar todo de una manera profesional.

Antes que inicien el curso me di cuenta que muchos pensamos que iba a ser algo práctico, pero no sucede eso en este curso. Debemos entender que este curso es de Diseño y debemos entender que diseñar es mas que solo lanzar líneas de código, este curso nos enseña como piensan los desarrolladores al enfrentarse a un problema de diseño, como cuando utilizo flex o grid, o cuando utilizar ambas, los patrones y tendencias de diseño y en fin, en realidad nos enseña como piensa un desarrollador frontend para diseñar UI y las herramientas que posee. Así que se van a encontrar con comentarios que dicen que no enseñan nada de código y es porque obviamente como mencioné, diseñar no es solo hacer algo bonito, tiene una teoría detrás que gracias a CSS podremos implementar.

“Esta parte de mi vida, esta pequeña parte, se llama FELICIDAD”

Comenzamos este nuevo curso!
Espero esta vez si haya más practica ya que es lo que eche de menos en el curso de Grid.
Pero me encantan los cursos con la teacher Stefy 💜

Tambien lo estaba esperando de haces dias ❤️

Segundo curso. El primero, es un verdadero complemento de habilidades (Grid). Me encantó. Ahora, les comparto una guía “extra”, que podrá complementar aún más los cursos ( https://losapuntesdemajo.now.sh/ ). Gracias por los cursos. Sería mucho pedir uno sobre animación ?

Hola, no soy muy amigo del front pero este curso es bueno!

Viendo platzi a las 3 de la mañana me di cuenta de que ya estaban disponibles los cursos de grid 😂😂😅💚

que le paso al de leonidas = (?

Me encantan los cursos actualizados… 😄 a practicar!

Veré este curso para repasar, seguramente me encontrare algo nuevo 😃

Vengo de CSS GRID

Creo que es uno de los programas bases para diseñar una pagina web.

¡Realmente les recomiendo mil tomar el curso de figma es excelente y lo necesitaran!

El curso anterior lo tomé mientras escuchaba esta playlist (por si a alguien le gusta estudiar con Lo-Fi)
https://open.spotify.com/playlist/7tjxIFUmKTZ3qAJKPJr069?si=e40bf71ca5ed4b93

A darle!! 😄

tercero. a darle!

=)

cuando usar grid o flex …

Vamo a darle

- Me encantan los cursos con Estefany ❤️ -

¿Estás pensando en crear o reestructurar tu web, blog o tienda en línea? Sigue leyendo 👇🏼

Tengo una emocionante noticia que compartir con vosotros/as 🎉

Recientemente he establecido una colaboración con Hostinger, reconocido como el segundo mejor proveedor de hosting del mundo.

Como parte de esta colaboración, he obtenido un beneficio exclusivo para todos vosotros/as.

Ahora, podrás disfrutar de un 10% de descuento adicional en todos los servicios de Hostinger utilizando el cupón “MARI” 🎁

Esto significa que podrás aprovechar los excelentes precios de Hostinger junto con este descuento especial por formar parte de mi comunidad 🔥

Hostinger ofrece una amplia gama de servicios de hosting de alta calidad, lo que te permitirá crear tu propio sitio web de manera fácil y rápida. Ya sea que necesites alojar un blog, una página personal o un proyecto más ambicioso, Hostinger es una excelente opción, ya sabes que yo solo colaboro con la cream de la cream 😉

Si tienes interés en aprovechar esta oferta exclusiva, puedes visitar el sitio web de Hostinger a través de este enlace especial https://hostinger.es/mari y aplicar el cupón: MARI al momento de realizar tu compra.

Recuerda que este descuento solo está disponible para esta increíble comunidad y es una oportunidad fantástica para obtener un servicio de hosting de calidad a un precio aún mejor.

No dudes en compartir esta noticia con tus colegas emprendedores/as, porque seguro que te lo agradecerán 🫶🏼

Si tienes alguna pregunta sobre cómo utilizar el cupón o necesitas más información sobre los servicios de Hostinger, no dudes en escribirme. Estoy aquí para ayudarte en todo lo que necesites.

Aprovechemos juntos esta oportunidad y construyamos nuestros proyectos web de manera fácil y económica con Hostinger (yo ya estoy creando un nuevo proyecto que verás muy pronto) 😉

¡Mil gracias y feliz creación de sitios web!

Un abrazo gigante, Mari Fernández ♥️

A darle, espero que este curso sea más práctico que el anterior

Entendi la referencia del texto que dice En este curso y sobre sale del cuadro JAJJAJAJAJAJAAJJA le falto overflow: hiden a tu diapositiva @teffcode

este es uno de los mejores cursos que hay pero no para novatos los novatos

Motivado con este curso! like para más cursos con TeffCode 😄

por experiencia propia platzi no es muy bueno la verdad soy estudiante de aqui pero me canse desde que conoci udemy y otras plataformas uno se da cuenta que platzi no es tan bueno como parece, ademas estas clases son muy aburridas

aqui vamos!!!

Encantado de tomar este curso completo !

i go hard !

bello el acento de la profe

Este es el cuarto curso que veo con Stefany, espero que este curso sea por lo menos mejor que los anteriores.

Genial!

Super interesante! justo tengo un test de ingreso a un nuevo trabajo y me vino super bien! mil gracias

Hola, que buena oportunidad gracias por compartir su conocimiento.

El diseno y yo no somos los mejores amigos, jaja, espero que esa relación mejore con este curso

Let’s go! Vamos con todo!

Vamo a darle

Tremendo cliffhanger el final de la clase. DIME MAS!!! jajaja gracias por el curso, empecemos.

Vengo recién terminando el curso de CSS Grid Layout y ahora comienzo este con todas las expectativas. 💪

Aquí vamos!!! #CaminoNinja

Hola holaaa acabo de empezar otro curso tuyo con ansias 😄

Aprovechando el Day Platzi de del 4 al 5 de junio un excelente motivo para desvelarse !!Comenzamos

I love you teacher!

A Darle!

Maraton de teffcode solo aquí en Platzi.

Sus cursos son muy buenos, estoy seguro que este me ayudara mucho a codear diseños mas extravagantes 😉💚

Bueno al fin llegue a este punto moria por conocer mas sobre css y css grid y flexBox

Genial, emocionado por empezar el curso.

curso esperado. (y)

Vamos por más, lo importante es saber como darle usa a estas herramientas en cualquier desarrollo web.

Estoy re perdida con esto. Veamos que tal con este curso. ❤️

Acabo de terminar el curso de Grid layout , asi que CON TODA con este curso , les deseo suerte

Me encantan los cursos de teff

Empezando el nuevo curso

Me siento emocionado por tener una nueva opción para realizar web responsivas <2

A seguirle dando a la ruta 🤜🤛✈

Excelente profesora. Estoy muy emocionado por estar nuevamente en uno de sus cursos

Me alegra mucho iniciar con este curso, esperando que pueda aprender bastante para aplicarlo en mis proyectos universitarios

Segundo curso con Estefany. A por él!!!

¡Buenas Vibra!! A empezar con la elegante Estefany

👌

Buena profe y tan linda que es Teff. (Con todo respeto)

Vamor a darle 😄

Yo también quiero un ¡saludo! : )

Vamos!!