# data[].attributes.body
Es una técnica de diseño web que se utiliza para crear sitios web que se adaptan y responden de manera eficaz a diferentes tamaños de pantalla y dispositivos, como computadoras de escritorio, tabletas y teléfonos móviles. El objetivo principal del diseño responsivo es asegurar de que la experiencia del usuario sea óptima, independientemente del dispositivo que esté utilizando para acceder al sitio web.
¿Para qué sirve el Responsive Design en CSS?
Mejora la Experiencia del Usuario
Aumenta la Usabilidad
Optimiza la Velocidad de Carga
Mejora el SEO
Aumenta la Retención de Usuarios

# data[].attributes.body
Selectores en CSS:

Los selectores en CSS son patrones que se utilizan para seleccionar y aplicar estilos a elementos HTML específicos en una página web. Los selectores determinan a qué elementos se aplicarán las reglas de estilo definidas en una hoja de estilo CSS. Algunos ejemplos comunes de selectores incluyen:

1. Selector de tipo: Selecciona todos los elementos de un tipo específico, como <p>párrafos o <h1>encabezados de nivel 1.

2. Selector de clase: Selecciona elementos que tengan un atributo class específico

3. Selector de ID: Selecciona un elemento con un atributo id específico. Los ID deben ser únicos en una página.

4. Selector de atributo: Selecciona elementos con un atributo HTML específico.

5. Selector descendiente: Selecciona elementos que son descendientes de otro elemento.

Propiedades en CSS:

Las propiedades en CSS son los atributos que se aplican a los elementos seleccionados mediante selectores. Estas propiedades controlan cómo se verá y se comportará un elemento en una página web. Algunos ejemplos de propiedades CSS incluyen:

color: Controla el color del texto.

font-size: Establezca el tamaño de la fuente.

background-color: define el color de fondo de un elemento.

margin y padding: Controlan los márgenes y el espacio interior alrededor de un elemento.

border: Establece el borde de un elemento.

width y height: Defina el ancho y la altura de un elemento.

Por ejemplo:

Copiar códigoh1 { color: red; font-size: 24px; background-color: yellow; margin: 10px; border: 1px solid black; width: 300px; }

Valores en CSS:

Los valores en CSS se utilizan para asignar un valor específico a una propiedad. Los valores pueden ser numéricos, palabras clave o cadenas de texto, dependiendo de la propiedad. Por ejemplo, en el caso de la propiedad color, un valor podría ser un nombre de color como "red", un código de color hexadecimal como "#FF0000" o un valor RGB como "rgb(255, 0, 0)".

En CSS, los selectores se utilizan para apuntar a elementos HTML específicos, las propiedades definen cómo se verán y se comportarán esos elementos, y los valores asignan valores específicos a esas propiedades. Juntos, estos conceptos permiten diseñar y dar estilo a páginas web de manera efectiva.

# data[].attributes.body
Pseudoclases en CSS:

Las pseudoclases en CSS son palabras clave que se agregan a los selectores para definir un estado especial o una interacción del elemento HTML seleccionado. Las pseudoclases se utilizan para aplicar estilos a elementos en función de acciones del usuario o del estado del elemento. Algunos ejemplos comunes de pseudoclases incluyen:

1. :hover: Se utiliza para aplicar estilos cuando el cursor del mouse se encuentra sobre el elemento

2. :active: Se aplica cuando el elemento está siendo activado, como cuando se hace clic en un enlace.

3. :focus: Se aplica cuando el elemento recibe el foco, como cuando un campo de entrada de texto está seleccionado.

4. :nth-child(n): Se utiliza para seleccionar elementos basados ​​en su posición dentro de un contenedor.

Pseudoelementos en CSS:

Los pseudoelementos en CSS son elementos virtuales que permiten seleccionar y estilizar partes específicas de un elemento HTML. Los pseudoelementos se representan utilizando dos puntos (::) después del selector. Algunos ejemplos comunes de pseudoelementos incluyen:

1. ::beforey ::after: Estos pseudoelementos permiten agregar contenido antes o después del contenido real de un elemento.

2. ::first-lettery ::first-line: Se utilizan para estilizar la primera letra o la primera línea de un elemento de bloque, como un párrafo.

3. ::selection: Permite estilizar el texto seleccionado por el usuario.

4. ::placeholder: Se utiliza para estilizar el texto de marcador de posición en campos de entrada de texto.

Las pseudoclases y los pseudoelementos en CSS permiten aplicar estilos y efectos especiales a elementos HTML en función de su estado o de partes específicas del contenido. Estos recursos son muy útiles para crear diseños web interactivos y personalizados.

# data[].attributes.headline
CASCADA Y ESPECIFICIDAD 05 - DISPLAY MÁS USADOS: BLOCK, INLINE E INLINE-BLOCK

# data[].attributes.subject
CASCADA Y ESPECIFICIDAD 05 - DISPLAY MÁS USADOS: BLOCK, INLINE E INLINE-BLOCK

# data[].attributes.body
Elementos en línea

Para explicarlo de manera sencilla, y simplificando, ciertas etiquetas HTML no afectan en absoluto al flujo de los demás elementos, limitándose a marcar ciertos fragmentos con una determinada semántica y dejando que el texto y otros elementos contiguos sigan fluyendo en la misma línea, colocándose a ambos lados de dicho elemento.

Elementos de bloque

Por el contrario, ciertas etiquetas se renderizan en el navegador en líneas independientes, no mezcladas con el resto del texto.  Ejemplos de estas etiquetas son los encabezados (<h1> hasta <h6>), las citas en bloque (<blockquote>), por supuesto los párrafos (<p>), y quizá la más conocida de todas que es la etiqueta <div> usada normalmente para envolver a otros elementos. A estos elementos se les denomina elementos de bloque.

Cambio de tipo de visualización y un tercer tipo intermedio

Bien, aparte de este comportamiento por defecto, es posible cambiar el modo en el que se visualiza/renderiza cualquier elemento HTML de una página usando la propiedad CSS llamada display.

Los más comunes son estos tres:

block: hace que el comportamiento del elemento sea como un bloque.

inline: el elemento se renderizará en línea con otros elementos.

inline-block: el elemento tendrá un comportamiento mezcla entre los dos anteriores, que ahora voy a describir.

# data[].attributes.body
QUÉ ES FLEXBOX

Este módulo de CSS fue diseñado para mejorar un aspecto que daba muchos quebraderos de cabeza: La ordenación, alineación y distribución de espacio entre elementos. Se trata de un modelo unidimensional en el que podemos ordenar elementos como filas o columnas, pero solo una de estas opciones.

PROPIEDADES

flex: Permite que todos los elementos tengan la misma anchura, independientemente de su contenido

flex-basis: Establece una anchura inicial del elemento

flex-direction: Marca la dirección principal del contenedor

flex-wrap: Controla el cambio de línea de elementos

flex-flow: Aúna flex-direction y flex-wrap

flex-grow: Marca el factor de crecimiento del contenedor

flex-shrink: Marca el factor de contracción del contenedor

justify-content: Alineación de elementos contenidos en eje principal

align-items: Alineación de elementos contenidos en eje secundario (unos con respecto a otros)

align-content: Controla la alineación de elementos contenidos cuando están en varias líneas (con respecto al contenedor principal)

QUÉ ES CSS GRID

CSS Grid va más allá, el control que da de la maquetación es un nivel superior, y nunca mejor dicho, ya que, si decíamos que flexbox era unidimensional, CSS Grid trabaja de forma bidimensional: Al igual que flexbox, tenemos columnas y filas, pero ambos elementos pueden ser definidos a la vez.

PROPIEDADES

grid: Permite unir en una sola declaración varias reglas (grid-template-rows, grid-template-columns, grid-row-gap, grid-column-gap, grid-template-areas…)

grid-template: Une en una sola declaración grid-template-rows, grid-template-columns y grid-template-areas

grid-template-columns: Declara el número de columnas y su anchura (total o relativa)

grid-template-rows: Declara el número de filas y su altura (total o relativa)

grid-row-start: Define en qué fila comienza el contenedor

grid-row-end: Define en qué fila acaba el contenedor

grid-row: Define en qué fila comienza y cuánto se expande el contendor (aúna grid-row-start y grid-row-end)

grid-auto-rows: Determina la altura por defecto en la fila

row-gap: Controla los espacios entre filas

grid-auto-columns: Determina la anchura por defecto en la columna

grid-column-start: Define en qué columna comienza el contenedor

grid-column-end: Define en qué columna acaba el contenedor

grid-column: Define en qué columna comienza y en cuánto se expande el contendor (aúna grid-column-start y grid-column-end)

column-gap: Controla los espacios entre columnas

grid-auto-flow: Define cómo fluyen los elementos por defecto en el contenedor

grid-area: Define el área que ocupa el contenedor. Une grid-row-start, grid-row-end, grid-column-start, grid-column-end

grid-template-areas: Permite usar nombres de áreas usando la declaración como una cuadricula

gap: Controla espacios entre filas y entre columnas

# data[].attributes.body
El Atomic Design es una metodología de diseño de interfaces creada por Brad Frost que propone descomponer las interfaces de usuario en componentes más pequeños y reutilizables, siguiendo una jerarquía similar a la estructura atómica de la materia. Estos componentes se dividen en cinco niveles principales:

1. Átomos (Atoms): Son los elementos de interfaz más básicos e indivisibles, como botones, campos de entrada, etiquetas de texto, iconos o imágenes.

2. Moléculas (Molecules): Se componen de varios átomos y representan componentes más simples, como un formulario de búsqueda que contiene un campo de entrada y un botón.

3. Organismos (Organisms): Son componentes más complejos que se construyen a partir de moléculas y/o átomos y pueden ser secciones enteras de una interfaz, como un encabezado de página que incluye un logotipo, un menú de navegación y una barra de búsqueda.

4. Plantillas (Templates): Define la estructura de una página o sección, colocando los organismos en su diseño adecuado.

5. Páginas (Pages): Son instancias concretas de plantillas que representan páginas web completas con contenido real.

¿Para qué sirve el Atomic Design ?

El enfoque del Atomic Design ofrece varios beneficios:

1. Reutilización de componentes: Los componentes atómicos y moleculares son altamente reutilizables, lo que facilita la creación de interfaces coherentes y eficientes.

2. Mantenimiento simplificado: Al dividir la interfaz en componentes más pequeños y manejables, es más fácil realizar cambios y actualizaciones sin afectar a otras partes del diseño.

3. Consistencia visual: Al seguir una estructura de diseño jerárquica, se promueve una consistencia visual en toda la aplicación o sitio web.

4. Desarrollo colaborativo: Facilita la colaboración entre diseñadores y desarrolladores, ya que ambos pueden trabajar en componentes individuales y luego ensamblarlos en interfaces completas.

5. Pruebas y depuración más sencillas: Los componentes individuales son más fáciles de probar y depurar, lo que mejora la calidad del producto final.

El Atomic Design es una metodología que se puede aplicar en la creación de estilos y componentes CSS, pero también se puede utilizar en el diseño y desarrollo de interfaces en general, incluyendo el diseño de componentes de interfaz de usuario en JavaScript o cualquier otro lenguaje de programación.