# data[].attributes.attachment_caption
Ejemplo: Su objetivo, brindarle al usuaria una mejor  exploracion en la pagina web sin importar en que dispositivo la solicite y que nos se pierda contenido.

# data[].attributes.headline
Responsive design mediaquery (Mediaconsulta de diseño responsivo)

# data[].attributes.subject
Responsive design mediaquery (Mediaconsulta de diseño responsivo)

# data[].attributes.body
Responsive web design se refiere al uso de diferentes técnicas para hacer que un sitio web se adapte, a cualquier dispositivo sin importar el tamaño, posicion o arientacion de dicho dispositivo.

Se trata de hacer más fácil la navegación al usuario, explorar y comprender para que puedan obtener exactamente lo que quieren de un sitio.

# data[].attributes.attachment_caption
Ejemplo: Un selector basico de CSS seria el de esta imagen que ilustra el Selector, La propiedad y el valor de un codigo CSS.

# data[].attributes.body
Selector:

Es la informacion que nosotros le brindamos hacia el navegador para que el pueda saber donde poner las reglas del estilo que nostros estamos creando.

Valores:

Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <color> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones rgb() , etc...

Propiedades:

Las propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

# data[].attributes.attachment_caption
Entre estos existen diferentes tipos de selectores entre el Pseudoclases y Pseudoelementos como:

# data[].attributes.body
Pseudoclases:

Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima.

Pseudoelementos:

Al igual que las pseudo-classes , los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

# data[].attributes.body
Cascada:

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

Un ejemplo claro de este seria el siguiente:

1. P

2.   color: red;

4. P

5.   color: black;

Esto seria un CSS en cascada, el CSS va a tener que escoger entre esas dos lineas de codigo, pero el CSS como lo havia mencionado anteriormente cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el code CSS.

Espicificidad:

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

Un ejemplo claro de este seria el siguiente:

1. h1.litle#litle{(0,1,1,1)
   background-color: red;
}

2. h1.litle {(0,0,1,1)
}
   background-color: black;
}

Algo importante de este ejemplo es que como este caso los dos elementos tienen la misma especifidad se toma en cuenta la cascada osea, el ultimo estilo que se haya aplicado.

Osea CSS a la hora de leer estilos tiene en cuenta la especificidad y la cascada.

# data[].attributes.body
En esta imagen podemos ver lo que son cada tipo de css-display:

display: block;  Esto significa que los elementos  <block> ocupan el 100% de el ancho.

Inline: Esto quiere decir como su nombre lo indica, son elementos en linea los cuales el espacio que ocupan es de su propio contenido.

Inline-block: esto quiere decir que por ejemplo, cuando tengamos elementos <block> pèro querramos colocarlos uno al lado del otro coloquemos             <display: inline-block> ahora lo que queremos con esto es que los elementos sigan siendo <block> pero a la vez en linea (uno al lado del otro).

Conceptos:

Inline-block:

Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

Un elemento block siempre tiene algo de espacio por encima y debajo, que lo separa de los demás elementos, y no acepta ningún otro elemento a su lado - si no está indicado de otra manera ( float ), "como una caja".

Block:

Un bloque en una página web es un elemento HTML que aparece en una nueva línea, por ejemplo debajo del elemento precedente y encima del siguiente elemento (comúnmente conocido como block-level element).

Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".

Inline:

El CSS inline se utiliza para dar estilo a un elemento HTML específico. Para este tipo de estilo CSS, sólo tendrás que añadir el atributo style a cada etiqueta HTML, sin utilizar selectores. Este tipo de CSS no es realmente recomendable, ya que cada etiqueta HTML debe ser estilizada individualmente.

# data[].attributes.attachment_caption
Ejemplo: Podemos observar como se va creando poco a poco un diseño e pagina web desde lo mas simple hasta el final del proyecto, como evolucion de atomos.

# data[].attributes.body
La metodología “Atomic Design”, o diseño atómico en castellano, es un sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas, una teoría que creó el diseñador digital Brad Frost.

# data[].attributes.attachment_caption
Ejemplo ilustrado: En este ejemplo podemos ver algunos de las propiedades que tiene flexbox para organizar el contenido como centrarlo, Separarlos, etc..

# data[].attributes.body
Flexbox:

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.

CSS Grind:

El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.
(Esta herramienta es mucho mas facil y potente para estructaras de paginas web).