Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

¿De dónde venimos y en dónde estamos?

2

¿Cómo fue pensado CSS cuando se creó?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

¿Cómo se llegó al concepto de CSS Grid?

5

¿CSS Grid es una idea nueva? La evolución de la especificación

6

¿Qué significa Grid para CSS?

Control de alineamiento

7

Técnicas de alineamiento antes de CSS Grid: margin y line-height

8

Técnicas de alineamiento antes de CSS Grid: table-cell y positions

9

Técnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades físicas y lógicas en CSS + Quiz

12

Técnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Quíz

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: ¿display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generación automática de tracks + Quíz

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

23

Ubicación + Reto

24

Alineamiento en los elementos hijos + Quiz

25

¡Manos al código! Fase de ubicación y alineamiento

26

Continuando con la fase de ubicación y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Continúa con el Curso de Diseño Web con CSS Grid y Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Qué significa Grid para CSS?

6/28
Recursos

Aportes 42

Preguntas 1

Ordenar por:

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

CSS Grid es algo así como: “¿Quieren tener 3 elementos en una fila y dos elementos abajo? Claro que sí, aquí estan… Oh ¿necesitas juntar dos filas? Sin problemas… ¿Necesitas que este diseño cambie para dispositivos móviles? Pero claro que sí”
.
Mientras que otras técnicas antiguas de alineación (como float) eran tipo: “¿Necesitas alinear dos filas y que se vean diferentes en un móvil? No puelo, es que me da amsieda”.
.
Jaja CSS Grid es poderoso, es de lo mejor ❤️ Me intriga saber qué herramienta podría sacar más a futuro además de CSS Grid… 🤔

Ansioso de ser de los primeros en tomar este curso, estaba súper ansioso!

💬 ¿Qué significa Grid para CSS?

<h4>Apuntes</h4>
  • CSS Grid requiera una forma completamente de pensar sobre el diseño en CSS
  • Es una de las herramientas de diseño más poderosa inventada para CSS
  • Es una alternativa más simple a diferencia de técnicas del pasado


Y pensar que todo comienza con un display: grid;

margin: 0 auto; solo magia de la vieja escuela.

wow, generalmente yo utilizo flexbox en mis proyectos, pero quiero darle una oportunidad a CSS grid, se ve que es muy poderoso.

una pregunta, ¿en dondé puedo ver las nuevas caracteristicas que se agreguen a CSS?

Grid es hacerte la vida fácil para hacer diseños espectaculares en tu web y sea responsive,

<strong>Llegó la salvación</strong>

Con grid estoy: solo inyéctalo en mis venas!

Grid definitivamente es un antes y un después para CSS.

Les dejo aquí un juego para practicar CSS Grid que está super divertido!

https://cssgridgarden.com/#es

Mucho éxito, compañer@s!!

Me gusta mucho la motivación que transmite la instructora en la enseñanza del curso, así como la gran cantidad de información y datos interesantes que comparte. Se aprecia mucho el gusto y aprecio por lo que hace.

Creo que el curso se llama PROFESIONAL porque cuando eres junior solo quieres hacer cosas, cuando vas avanzando empiezas a entender el porque de las cosas y ahi empiezas a realmente aprovechar las herramientas y puedes empezar a explicar a otros de mejor manera, te vuelves mas senior

No se trata simplemente de agregar propiedades a cada elemento individual. Ahora puedes tener un modelo diferente en el que comienzas con tu diseño priemro y luego incorporas los diferentes elementos en ese diseño. - Bert Bos


Es la herramienta de diseño más poderosa que hemos inventado hasta ahora para CSS. - Atkins


CSS Grid toma todas esas cosas complicadas que tuvimos que hacer para lograr diseños básciso y lo complemetamente innecesario. - Etemad


Estoy entusiasmado con el futuro del diseño CSS. CSS Grid no es el final; en realidad es solo el comienzo. - Whitworth

¿Qué significa Grid para CSS?

Grid es una firma nueva de pensar sobre como realizar un diseño de distribución de elementos con CSS. Muchos desarrolladores afirman que CSS grid es un gran paso para el diseño en CSS, ya que tumbo todos esos trucos planteando una forma nueva de hacerlo con el mismo o mejor resultado.

Repositorio de mis a puntes

Ventajas de CSS Grid:
*Mucha más flexibilidad: te permite controlar los elementos en las 2 dimensiones y con total libertad.

*Menos código y menos bugs: se reduce considerablemente el código empleado, lo que conlleva revisiones más sencillas y menor probabilidad de bugs.

*Optimización de recursos: al ser código más simple y consistente se economiza tanto en tiempo como en recursos necesarios para mostrar la página.

*Responsive más sencillo: permite crear elementos dinámicos que se adaptan a diferentes tamaños o resoluciones sin complicaciones.

Les dejo un video cortito sobre la creacion de Grid y un texto muy interesante para leer!

🎞 https://channel9.msdn.com/Blogs/msedgedev/Creating-CSS-Grid

📄 https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

CSS grid + flexbox + imaginación: ¿Hay algo que no se pueda hacer?

🗿 En mis tiempos alineabamos con regla

Yo apenas tome los cursos de html y css, así como el de responsive design y en lo personal yo me siento muy cómodo con el css ‘normal’. No es que no este abierto a otras posibilidades, pero me intriga saber como es que css grid hace los diseños aun mas simples…

What comes next? CSS Cyborg? If grid is the beginning i cant expect less

Como que ya me esta empezando a emocionar bastante este curso.

Alineamiento con flexbox y css grid! simple!

Me siento mas cómodo usando flexbox pero siempre es bueno manejar alternativas

La verdad felicito a la profe y a los planificadores de este curso, ya que estos primeros 6 videos te dejan bastante entusiasmado con lo que se va a aprender, no solo empiezan con código, trucos y listo, sino que intentan darte un verdadero motivo inicial por el cual aprender todo esto. Muy agradecido!

  • CSS Grid requiere una forma completamente de pensar sobre el diseño en CSS
  • Es una de las herramientas de diseño más poderosa inventada para CSS
  • Es una alternativa más simple a diferencia de técnicas del pasado

Bert Bos: No se trata simplemente de agregar propiedades a cada elemento individual. ahora puedes tener un modelo diferente en el que comienzas con tu diseño primero y luego incorporas los diferentes elementos en ese diseño.

Atkins: Es la herramienta de diseño más poderosa que hemos inventado hasta hora para CSS.

Etemad: Css Grid toma todas esas cosas complicadas que tuvimos que hacer para lograr diseños basicos y lo hace completamente innecesario.

Whiworth: Estoy entusiasmado del diseño Css.
Css Grid no es el final, en realidad es solo el comienzo.

Grid es un modulo muy importante para CSS.
Yo lo aprendi con el curso de Leo pero la falta de practica hizo que perdiera muchas nociones y estoy mas que ansioso por empezar a crear un proyecto con lo que aprenda aquí.
Pero toda esta parte de la historia no esta nada mal ya que realmente desconocía la mayoría de cosas que hemos visto hasta ahora.
Muchas Gracias !

excelente curso, valió la pena la espera.

estaba esperando el curso

Me encantan estas clases, ahora tengo perspectiva y entiendo el valor de css grid, me siento afortunado de aprenderlo en esta época!

CSS Grid toma todas esas cosas complicadas que tuvimos que hacer para lograr diseños básciso y lo complemetamente innecesario. - Etemad
.
Esto me recuerda un poco los inicios del diseño con CSS

Se vienen cositas para el CSS B)))

Definitivamente Grid llegó para hacernos la vida más fácil.
Desaparecen las limitaciones técnicas que tenían las webs, y ahora el único límite está en la imaginación del desarrollador.

ya quiero conocer el poder de CSS GRID. 💪

Me imagino que la proxima herramienta estará ligada con Three.js, nuevos comandos y funcionalidades para poder realizar animaciones o diseños 3d ya que esta tendencia a sitios web 3d esta tomando popularidad.

Yo que nomas venia por curiosidad a saber un poquito mas de Web Design pues solo queria usar frameworks y termine entusiasmado por conocer mas de CSS 😐

Vamos a revisar estas tecnicas de alineamiento

Siempre le tuve temor a CSS porque no lograba aplicar los conceptos de posicionamiento correctamente, hasta que conocí este maravilloso curso, prácticamente cambio una parte en mi.

es curiosa la información aquí tocada en el inicio de este curso

I really like the way you explain, Teff. I’m learning about something important as css grid, but I enjoy it, because your attitude, voice, and your slides help me to learn without stress.
.
Thanks. 💚👩🏻‍💻

con lo que llevamos del curso puedo decir que esta mejor que el del innombrable, emocionado de ver este curso

< 😃 > </>