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

Limitaciones de CSS y el problema de los elementos flotantes

3/28
Recursos

Aportes 48

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃槮

Me siento afortunada de estar aprendiendo Css en este tiempo.

馃挜 Limitaciones de CSS y el problema de los elementos flotantes

<h4>Ideas/conceptos claves</h4>

columnas falsas es una t茅cnica que hace una ilusi贸n cuando una columna es m谩s peque帽a que otra se la rellena de un background de tipo imagen

<h4>Apuntes</h4>
  • Los primeros dise帽os de CSS eran una mezcla entre elementos flotantes y posicionados

    • Haciendo que se tengan limitaciones de control
    • Provocando que la informaci贸n no se vea uniforme
  • Exist铆a una frustraci贸n por la falta de columnas de altura completa

    • Para solucionarlo se cre贸 una t茅cnica de columnas falsas
  • Se empieza hablar de Dise帽o Responsivo

    • Ethan Marcotte 鈬 Tecnica de dise帽o responsivo
    @media screen and (max-width: 400px) {
      .figure,
      li#f-mycroft {
        margin-right: 3.317535545023696682%;    /* 21px / 633px */
        width: 48.341232227488151658%;          /* 306px / 633px */
      }  li#f-watson,
      li#f-moriarty {
        margin-right: 0;
      }
    }
    
  • Se empieza a trabajar con elementos flotantes

    • El problema est谩 que solo funciona cuando se calcula con precisi贸n el ancho y si el contenido tiene la misma altura
    • La soluci贸n fue que se comenz贸 a trabajar con columnas a trav茅s de contenedores para cada una y no con elementos independientes
    • Tambien se comienza a usar display: table que tambi茅n se pueden utilizar para elementos que no son elementos de tablas
  • Existen una gran cantidad de t茅cnicas que son simplemente trucos

    • Por ello CSS se ha visto dif铆cil y fr谩gil porque no hab铆a herramientas de dise帽o

RESUMEN: En el principio usar CSS implicaba usar trucos, comenzando desde las columnas, columnas de tama帽o completo, el dise帽o responsivo, etc. Era de esta manera debido a que no se ten铆an muchas herramientas

Colocar elementos sol铆a ser frustrante.
Se ten铆an que usar trucos para lograr la distribuci贸n requerida.
Por ejemplo usar backgrounds simulando columnas falsas
Utilizar tablas para acomodar elementos aunque este no era el prop贸sito sem谩ntico de display:table
Tambi茅n exist铆a Noodle Incident en donde se pod铆a encontrar plantillas que otros usuarios hab铆an creado para facilitar m谩s el trabajo.
Todo un l铆o.

Cuando estaba comenzando a aprender CSS me contaban que antes de que existiera Responsive Design los desarrolladores tenian que hacer como 4 veces los estilos, para cuatro tipo de pantallas diferentes鈥
Literalmente ten铆an que hacer el mismo trabajo 4 veces, debemos darle gracias a dios que hoy en d铆a existe el Responsive Design 馃槄馃槄馃挌

Apuntes

  • Los primeros dise帽os de CSS eran una mezcla entre elementos flotantes y posicionados

    • Haciendo que se tengan limitaciones de control
    • Provocando que la informaci贸n no se vea uniforme
  • Exist铆a una frustraci贸n por la falta de columnas de altura completa

    • Para solucionarlo se cre贸 una t茅cnica de columnas falsas
    • Dan Cederholm, creo una tecnica de columnas falsas
    background: #ccc url(../images/bg_birch_800.gif)
     repeat-y 50% 0;
    
  • Se empieza hablar de Dise帽o Responsivo

    • Ethan Marcotte 鈬 Tecnica de dise帽o responsivo
    @media screen and (max-width: 400px) {
      .figure,
      li#f-mycroft {
        margin-right: 3.317535545023696682%;    /* 21px / 633px */
        width: 48.341232227488151658%;          /* 306px / 633px */
      }  li#f-watson,
      li#f-moriarty {
        margin-right: 0;
      }
    }
    
  • Se empieza a trabajar con elementos flotantes

    • El problema est谩 que solo funciona cuando se calcula con precisi贸n el ancho y si el contenido tiene la misma altura
    • La soluci贸n fue que se comenz贸 a trabajar con columnas a trav茅s de contenedores para cada una y no con elementos independientes
    • Tambien se comienza a usar display: table que tambi茅n se pueden utilizar para elementos que no son elementos de tablas
  • Existen una gran cantidad de t茅cnicas que son simplemente trucos

    • Por ello CSS se ha visto dif铆cil y fr谩gil porque no hab铆a herramientas de dise帽o

MI RESUMEN: En el principio usar CSS implicaba usar trucos, comenzando desde las columnas, columnas de tama帽o completo, el dise帽o responsivo, etc. Era de esta manera debido a que no se ten铆an muchas herramientas

S贸lo como curiosidad, esta es la p谩gina que menciona con plantillas para copiar y pegar el css segun el dise帽o que quieran.

https://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

No cabe duda que a d铆a de hoy la tenemos mas f谩cil los que estamos comenzando con el desarrollo web.
Todo lo tenemos documentado, muchos cursos, muchos tutoriales y con mejores practicas para hacer las cosas de una manera mas r谩pida pero mejor.

Para triunfar en Css Grid , hay que pensar fuera de la caja

En lo personal, cuando comenc茅 a estudiar (desde cero) programaci贸n, pens茅 que, 鈥淐SS鈥, ser铆a f谩cil. La verdad es un complemento perfecto. Adem谩s, luego se me complic贸 m谩s con SASS. Ahora, despu茅s de tanta pr谩ctica鈥o lo dejar铆a a煤n lado.

Como se veia a los desarrolladores hace unos a帽os 馃槄馃槄

alguien mas escucho el gata de fondo el segundo 57? jajjajja

Mis apuntes:

  • los primeros dise帽os de CSS era una mezcla de elementos flotantes y posicionados (Si entraba un elemento m谩s grande del que ya ten铆an,provocaba que se perdiera el control de los elementos y por consecuente no se ve铆a uniforme

  • Noodle Incident, Exist铆an recursos en l铆nea para copiar y pegar y documentaciones que trataban de solucionar ciertos problemas

  • A pesar de que ten铆amos var铆as personas de la comunidad aportando, a煤n se segu铆a frustrado por el tema de las columnas. (Dan Cederholm crea una t茅cnica de columnas falsas) usando un background por debajo dando la ilusi贸n de que el contenido bajaba parejo

  • Dise帽o responsivo: medidas absolutas y relativas (Ethan Marcotte) >鈥渄eb铆amos tener un contenido adaptativo鈥

  • el problema de los elementos flotantes: La idea principal de los elementos flotantes es que se puedan ajustar y esparcir al rededor del contenido principal, pero a medida de que el tama帽o de la pantalla cambiaba, los elementos se iban desalineando

  • Se trabaj贸 en el display:table los valores se pueden ampliar a otros elementos de html diferentes a <tr> y <td> como los <div>, <ul>, etc.

  • Existen una gran cantidad de t茅cnicas que son simples TRUCOS y gracias a esto, el dise帽o de con css parece dif铆cil y fr谩gil pero porque no hab铆an las herramientas de dise帽o las cu谩les hoy nos han facilitado el camino

muy explicativa gracias
Estefany Aguilar

es como un museo

A veces queremos aprender r谩pido todo. Pero este curso me esta ense帽ando la importancia de saber de donde venimos. Y hacia donde vamos!

Fantastic! The evolution in CSS has been because of people with good cheats.

Perdonen la ortografia:(( mi teclado esta en formato ingles.
Los primeros disenos de CSS eran una mezcla entre los elementos flotantes y posicionados. Por lo mismo, en ese entonces salio Noodle Incident (Recursos en linea para copiar y pegar).

Despues crearon una ilusion llamad 鈥淐olumnas Falsas鈥 por Dan Cederholm. Despues se empezo a medir las medidas relativas y el diseno responsivo o Responsive Desing.

Despues empezamos a trabajar con elementos flotantes, que no habia problema si se calculaba con precicion el ancho y si el contenido tiene la msima altura, si no, esto se empezaria a desalinear, despues se empezo a trabajar con display: table.

Existen una gran cantidad de tecnicas que son simplemente trucos. Gracias a eso, el diseno con CSS parece dificil y fragil. No Habian herramientas de diseno.

Que bacano es poder conocer algo de la historia del codigo y todos los problemas que ha tenido para llegar a como lo escribimos hoy. Hay algun libro (puede ser en ingl茅s) que cuente sobre la historia de la programaci贸n, CSS, HTML, etc鈥?

Excelente!!

Clase para estar agradecidos con CSS3 y sus novedades n.n

desde que empece a estudiar le tenia ganas a este curso, pero estaba enfocado en js, ahora que salio, me vine de una a pillarlo

Iteraci贸n es la clave aqu铆. Cada Vez que se presentaba una dificultad se mejoraba CSS 馃槂

Pensando como va fluir todo

Afortunadamente llegu茅 al css3, porque creo que hubiera enloquecido

Yo sufr铆 esos problemas que menciona la profe hace 10 a帽os, odiaba CSS, hoy es extremadamente simple

3er video y aun no he visto 鈥減apayawhip鈥, me pregunto en que momento ser谩 en este curso, jejejej
Pdta: excelente profesora 馃槂

Si me da algo de miedo CSS, no se, como que nunca me funciona jaja pero para eso estoy aqui, para aprender jsjs

Muy interesante la historia, pero no deber铆a estar en los primeros cursos de HTML y CSS, ya que este curso es espec铆fico de Grid.

Wow sigo este curso porque me meti a la #Liga creativa el cual desperto el intres de aprender a manipular bien Grid Layaout!

Ethan Marcotte -> Responsive Design 馃巼

Tablas - Display: table;

Elementos flotantes

Responsive Desing por Ethan

T茅cnica de columnas falsas por Dan

Noodle Incident - Una de las primeras soluciones al problema de los elementos flotantes

Aqui un recurso con la breve historia y evolucion de CSS:
https://uniwebsidad.com/libros/css/capitulo-1/breve-historia-de-css

interesante ver la evoluci贸n !

I feel that learn CSS at this time is a huge advantage

Limitaciones de CSS y el problema de los elementos flotantes

Los primeros dise帽os de CSS eran una mezcla entre elementos flotantes y posicionados.

Pero segu铆an frustrados por la falta de columnas de altura completa.

Dan Cederholm creo la t茅cnica de Columnas Falsas

Ethan Marcotte creo Dise帽o Responsivo

El problema de los elementos flotantes: Esto funciona bien si se calcula con precisi贸n el ancho y si el contenido tiene la misma altura, sin embargo si el contenido cambia de tama帽o se empieza a desalinear.

Entonces se pens贸 en crear contenedores para las diferentes columnas y se trabaj贸 con display: table;

Al final del d铆a todos estos eran solamente trucos.

Gracias a eso, el dise帽o con CSS parece dif铆cil y fr谩gil:
No hab铆a herramientas de dise帽o.

Entonces nacieron herramientas que nos han facilitado el camino.

To be continued鈥

Increible Css, me emociona aprender esto

0:59, al gato de teffcode le preocupan las limitaciones de CSS xD

Excelente curso para estar actualizado.

No olviden, los slides en la secci贸n de recursos. Slides