Pasó un tiempo hasta que entendí la diferencia entre las 3 position: relative, absolute y fixed. No fue hasta un curso de Diana Aceves donde vi con claridad quién se posicionaba respecto a quién, y lo más importante: por qué. Ahí me di cuenta que mi relación con el CSS…

Artículo en constante actualización Las CSS Custom Properties permiten definir variables dentro del rango que le especifiquemos, si por ejemplo la definimos dentro de un .container , sólo se podrá usar en todos los elementos que estén dentro de esa clase. Se definen de la siguiente manera: --nombreDeVariable: propiedad; Y…

Hay 6 elementos que podemos utilizar para estructurar nuestro HTML semánticamente. main header footer article section aside Estos elementos tienen un significado semántico que no tiene por qué estar relacionado a su estilo visual ni a su posición en la página. Habitualmente vemos el footer debajo de todo y el…

En sólo 3 pasos! 🎯 — Muchos de nosotros tenemos proyectos y ejercicios montados en GitHub, ese hermoso repositorio donde poner nuestros experimentos y compartirlos con el resto de la comunidad. Pero muchas veces dejamos el código ahí y ya está. Esperando que la persona que quiera verlo en acción se descargue el repo, lo monte…

O cómo procurar no llenar tu HTML de clases. — Tailwind es un framework CSS que tiene personas a favor y en contra. Este pequeño artículo no pretender ahondar en las razones de por qué esto sucede, pero sí aclarar algún aspecto que da mucha confusión en general. Es que TailwindCSS me ensucia el HTML con muchas clases. Esta es…

Las stripes son esas franjitas tan bonitas que podemos ver en muchos sitios en la calle, a menudo en carteles pero también en lugares cotidianos.

Un componente en Vue.js atraviesa varias instancias o estados. Vamos a listarlas y comentar un poco por arriba cada una. beforeCreate: se ejecuta antes de que se cree el componente. created: cuando el componente ya se ha creado, pero aún no existe en el DOM. beforeMount: una vez que el…

La pseudoclase nth-of-type nos permite seleccionar elementos de acuerdo al tipo de elemento que queremos elegir. Por ejemplo, teniendo este HTML: <ul> <li>Elemento 1</li> <li>Elemento 2</li> <p>Aquí hay un párrafo</p> <li>Elemento 3</li> <li>Elemento 4</li> </ul> Si quisiéramos pintar nuestro elemento 3, si lo hiciéramos mediante nth-child no nos funcionaría: li:nth-child(3)…

nth-child es una pseudoclase que puede resultarnos muy útil al momento de seleccionar ciertos elementos de nuestro HTML. Hay que tener en cuenta que, como su nombre indica, nos permite seleccionar elementos hijos (child) basándonos en la posición que tengan dentro de su padre (parent). Sintaxis Podríamos decir que su uso…