TIL ...

Curso gratuito: crea un blog desde cero

Puede ser más fácil de lo imaginado.

Antes de llegar al artículo, solo quiero compartir que estoy creando un producto, y me encantaría recopilar algunos datos sobre cómo servir mejor a los desarrolladores web. Creé un breve cuestionario para revisar antes o después de leer este artículo. Por favor, échale un vistazo, ¡gracias! Y ahora, de vuelta a nuestra programación regular programada.

El blog que construiremos. ¿Prefieres el video? Haga clic aquí para abrir en Scrimba

Si eres como yo, estás interesado en la web y su alcance abrumador, pero también estás inundado con el desorden de información que está aprendiendo HTML y CSS. La cuestión es que estos lenguajes son diferentes a otros dominios, como los procesadores de texto y los lenguajes de programación. La web es otro mundo y no es la cosa más bonita del mundo.

Después de haberme aprendido algo de la web, estoy aquí para dar un empujoncito de aliento, porque, con un poco de orientación, estos dominios pueden ser mucho más fáciles de lo que imaginas. Continúa leyendo y crearemos un hermoso blog desde cero. También aprenderemos algunos CSS Grid, Flexbox y Responsive Design.

El objetivo es hacer por ti lo que he hecho por mí mismo; aprende HTML y CSS desde los primeros principios.

¿Prefieres el video? Haga clic aquí para abrir en Scrimba

También enseñé un curso gratuito de HTML / CSS en Scrimba donde enseño cómo construir un hermoso blog desde cero. Haga clic aquí para inscribirse!

¡Scrimba.com es una plataforma front-end interactiva donde los sitios web se graban como eventos, no como videos, y se pueden editar!

Entonces, ¿de dónde viene el HTML?

HTML es un descendiente del primer meta o lenguaje de marcado: GML. Los lectores de Millennial ahora están resolviendo que GML significa lenguaje de marcado generalizado, pero eso no es todo lo que significa. Fueron Charles Goldfarb, Edward Mosher y Raymond Lorie quienes crearon lo que ahora conocemos como meta o lenguaje de marcado en IBM. Y en 1996, Charles Goldfarb escribió:

“Le di a GML su nombre actual para que nuestras iniciales siempre prueben dónde se originó. Una de las verdades feas de la transferencia de tecnología es que los desarrolladores tienden a estar agradecidos por el trabajo de investigación cuando se reciben por primera vez, y prácticamente no se dan cuenta al final de un largo ciclo de desarrollo ... "
- Charles Goldfarb, en 1996

GML luego se estandarizó, convirtiéndose así en SGML. Luego, Tim Berners-Lee, que trabajó en el CERN, tomó prestado el ML de SGML (no, no aprendizaje automático, o como lo llamen los hipsters) para crear HTML, donde HT significa HyperText.

Whoa, buena palabra. Y, según tengo entendido, tiene su origen en un entorno de autoría interactivo llamado HyperCard, de Bill Atkinson, que trabajó en Apple. Para una exploración más profunda, presento los siguientes videos:

Haga clic para obtener más información.

Entonces, recapitulemos. HTML no solo se apoderó del mundo. De hecho, había todo un mundo antes de HTML. WUT? Lo sé, estoy temblando en estado de shock, pero no había nacido, así que no había un mundo.

Y, HTML le debe mucho a sus predecesores. Como lo hacemos todos con nuestros padres. Sin embargo, así es como hacemos el código del texto. Ahora, en cuatro lecciones de un minuto, enseñaré los conceptos básicos de HTML, CSS y diseño receptivo.

HTML y CSS en 4 minutos

Primer minuto: un sitio web puede entenderse mejor como un árbol web


     
     

Todos los sitios web comienzan su vida como tal. Sin embargo, y esto es terrible, no hay contenido. Sin embargo, comenzamos aquí porque primero debemos entender qué es un sitio web. Piense en ello como un árbol, un árbol al revés *, un árbol web. El elemento html es la raíz, mientras que head y body son las primeras ramas de nuestro webtree:

   html <- raíz
   / \
cabeza cuerpo <- ramas

El elemento principal (o etiqueta, lo mismo) es para metadatos o información sobre nuestro sitio web. El elemento del cuerpo, por otro lado, es para el contenido de nuestro sitio web. Y como CSS es el estilo de nuestro sitio web, va en el elemento principal, mientras que el contenido, como párrafos, videos de gatos (≧ ∇ ≦), etc., van en el elemento del cuerpo.

Segundo minuto: los elementos o etiquetas tienen múltiples apariencias


 valor 
 value 
  1. El primer elemento es un elemento de cierre automático, donde comunicamos algo al navegador, pero tampoco tiene un valor. Un ejemplo de esto es el elemento
    , que inserta un salto de línea.
  2. El segundo elemento es un elemento común, donde comunicamos un valor como perteneciente a algún elemento. Por ejemplo,

    hola, mundo!

    es el valor "hola, mundo!" Como perteneciente al elemento de párrafo.
  3. Por último, tenemos un elemento con un atributo. Y un atributo es lo que parece, ¡maldición, es un atributo! Le da a un elemento más contexto o significado. Los atributos pueden tener múltiples valores, y los elementos pueden tener múltiples atributos. Acepto de atributos.
 value 

Ahora, debo mencionar, no creamos los nombres de nuestros elementos HTML. Los tomamos prestados de una lista de más de 100 elementos predefinidos. ¡Por supuesto, esto hace que algunas cosas sean más fáciles y otras mucho más difíciles, como la memorización!

Tercer minuto: cómo se comunican HTML y CSS



    
        
        
    
    
         valor 
    

El! DOCTYPE html especifica que estamos escribiendo HTML5, como se supone para todas las otras versiones de HTML que queremos evitar. Y dado el elemento meta de cierre automático con el atributo charset y el valor UTF-8, nuestro texto está codificado en Unicode. UTF-8 significa formato de transformación Unicode ... 8. ¡Ahora podemos escribir en ! Una vez, papá decidió enviar solo mensajes de texto emoji.

¯ \ _ (ツ) _ / ¯

También agregamos un elemento de estilo que es uno de los puntos de entrada disponibles para CSS. Donde el selector selecciona un elemento y le aplica una propiedad con un valor correspondiente. Exploraremos esto y más en el próximo minuto.

De nuevo, debo mencionar, no creamos los nombres de nuestras propiedades CSS. Los tomamos prestados de una lista de cientos de propiedades predefinidas. ¡Por supuesto, esto hace que algunas cosas sean más fáciles y algunas cosas mucho, mucho más difíciles, como ____________!

Cuarto minuto: hola mundo!



    
        
        
    
    
        

hola mundo

    

¡Ya no es terrible nuestro sitio web! Lo que tenemos es "¡hola, mundo!" En texto verde, y si el ancho de nuestro sitio web cambiara de tamaño a 8,5 pulgadas o menos, se leería en azul, y en 5 pulgadas o menos, rojo. Aquí, utilizamos consultas de medios para anular CSS en alguna circunstancia, como el ancho de nuestro sitio web.

¿Qué es un restablecimiento y depurador CSS?

¿Prefieres el video? Haga clic aquí para abrir en Scrimba

Utilizamos un reinicio para garantizar que nuestro diseño sea coherente y un depurador para exponer inconsistencias.

Necesitamos nuestro reinicio, porque los navegadores son obstinados y establecen algunas propiedades de CSS que queremos desarmar. Existen restablecimientos CSS populares, pero haremos los nuestros. Y necesitamos nuestro depurador para mantener el diseño de nuestro sitio web con facilidad.

Podemos hacer una carpeta llamada styles para alojar nuestro reset y depurador:

estilos /
       reset.css
       debug.css

Y para vincular nuestros nuevos archivos CSS a nuestro index.html, agregamos elementos de enlace:

        ...
        
        
        
        
    ...

Ingrese CSS Grid. Primero, seleccionamos el artículo y aplicamos tres propiedades: la pantalla define el elemento como una cuadrícula, columnas de plantillas de cuadrícula-plantilla-columnas, y la altura simula que cada artículo tiene la altura de una página. Sin embargo, la altura es un código de pegamento y se eliminará.

Centrémonos en las dos líneas más importantes:

artículo {grid-template-columnas: 1fr minmax (0, 8.5in) 1fr; }
artículo * {grid-column: 2/3; }

O, en otros tiempos:

Tendrás tres columnas,
Cuya columna central albergará a tus hijos.

Primero, si hubiéramos establecido columnas de plantilla de cuadrícula en 1fr 1fr 1fr, donde fr es la abreviatura de unidad de fracción, nuestras tres columnas se dividirían en tercios. Sin embargo, nuestra columna central tiene un ancho mínimo máximo, lo que significa que responde. A menos de 8,5 pulgadas, nuestra columna central se renderiza al 100% de ancho, y nuestras columnas más a la izquierda y a la derecha desaparecen, ya que no queda ningún resto.

Barra lateral: tenga en cuenta que el diseño receptivo no se limita a las consultas de medios. Este es un ejemplo de dónde nuestro diseño responde implícitamente, en lugar de responder explícitamente. Este es el mejor tipo de diseño receptivo, porque no está codificado. Y esta es una de las razones por las que CSS Grid y Flexbox son tan poderosos.

En segundo lugar, para comunicar que los elementos secundarios del artículo pertenecen a la columna central, o comienzan en la segunda columna y finalizan en la tercera, establecemos grid-column en 2 / 3. Observe la sutil diferencia entre grid-template-column y grid-column, a columnas de plantilla o columnas de expansión.

CSS Grid es excelente, y lo es, pero ahora nos apoyaremos en Flexbox para centrar nuestro texto de ARTÍCULO. Lo que estamos a punto de hacer es crear una clase de utilidad, y es otro paradigma para escribir CSS. Aquí, usamos el hecho de que los elementos pueden tener atributos de estilo en línea para el elemento p:

ARTÍCULO

¿CSS en HTML?
(╯ ° □ °) ╯︵ ┻━┻

Esto es lo que está sucediendo: los elementos tienen un atributo de clase. Y podemos usar este atributo no solo para escribir CSS en elementos, sino también en un tipo de elemento o clase de elemento. Esto significa que podemos reutilizar las clases en varios elementos, independientemente de su semejanza. Por desgracia, nada ha cambiado, también necesitamos crear una clase .debug-center en algún lugar de nuestro CSS. ¿Qué tal nuestro depurador?

...
.debug-center {
    pantalla: flex;
    justify-content: centro;
    alinear elementos: centro;
}

Tenga en cuenta que usamos a. prefijo para diferenciar clases de elementos.

Ahora, donde sea que se atribuya un elemento a nuestra clase de centro de depuración, su texto se centrará. Primero, configuramos la visualización para flexionar, haciendo que cualquier elemento sea un elemento Flexbox en lugar de un elemento CSS Grid. Luego configuramos justify-content para centrar en el centro horizontalmente y alinear elementos para centrar en el centro verticalmente. Aaagh!

Imagínese esto: utilizamos la cuadrícula para diseñar el diseño de nuestro sitio web y Flexbox para flexionar los elementos de nuestra cuadrícula en la posición deseada.

Iterando nuestra grilla

¿Prefieres el video? Haga clic aquí para abrir en Scrimba

Tenemos un problema: sin .debug-center ARTICLE abraza las paredes izquierda y derecha. Lo que necesitamos son canales verticales y horizontales para que nuestro contenido pueda respirar. Aaah De lo contrario, la lectura se volvería frustrante y conduciría a una experiencia de usuario deficiente.ヾ (• ́д • ̀;) ノ

Para acolchado vertical:

artículo {
    relleno: 0.5in 0;
    ...
}

Y para el relleno horizontal, podríamos usar relleno, y cualquiera funcionaría:

acolchado: 0.5in 0.5in;
acolchado: 0.5in;

Sin embargo, queremos que nuestros canales sean receptivos, por lo que utilizaremos CSS Grid:

artículo {
    ...
    columnas-plantilla-cuadrícula: 1fr 0.5in [inicio] 7.5in [fin] 0.5in 1fr
}

Aquí, hicimos tres cosas: 1. definimos nuestras canaletas horizontales como 0.5 pulgadas (estas serán receptivas, ¡lo prometo!). 2. nuestra columna de contenido pasó de 8.5in a 7.5in, la suma aún era de 8.5in, y 3. los identificadores inventados comienzan y terminan para nombrar el inicio y el final de nuestra columna de contenido.

Cuando agregamos nuevas columnas, también necesitábamos actualizar el artículo *:

artículo * {grid-column: 3/4; }

Pero contar columnas no es lo ideal. En cambio, usemos nuestros identificadores inventados:

artículo * {grid-column: start / end; }

Actualizamos nuestra grilla sin interrumpir el flujo de contenido, siempre y cuando sigamos usando los identificadores de inicio y fin que inventamos. ⊂◉‿◉ つ

Por último, como se prometió, necesitamos que nuestros canales sean receptivos. minmax () por una razón u otra no funciona aquí, por lo que utilizaremos consultas de medios:

@media (ancho máximo: 8.5in) {
    artículo {
        cuadrícula-plantilla-columnas: 1fr 5% [inicio] 90% [fin] 5% 1fr;
    }
}

Ahora a menos de 8.5 pulgadas, el artículo usará% en lugar de adentro para dividir nuestras columnas, y las columnas de la izquierda y la derecha desaparecerán porque, nuevamente, no queda ningún resto. A pesar de todo esto, podríamos establecer el relleno en 0.5in 5% para lograr el mismo efecto, entonces, ¿qué da? Sigue leyendo!

Iterando nuestra grilla, otra vez

¿Prefieres el video? Haga clic aquí para abrir en Scrimba

Para comprender nuestra cuadrícula, usemos imágenes para abarcar columnas, de 100% a 8.5in a 7.5in en escritorio, y de 100% a 90% en dispositivos móviles. Sin embargo, para la última imagen, la de la izquierda en la parte inferior, necesitamos agregar aún más columnas a nuestra cuadrícula. AF) UBQWF * VBQPWIFB, ¿estoy en lo cierto?

No se deje intimidar: la cuadrícula CSS es increíble. Agreguemos dos columnas más:

artículo {
    ...
    columnas-plantilla-cuadrícula:
        1fr 0.5in [inicio] 1.25in 5in 1.25in [final] 0.5in 1fr;
}
@media (ancho máximo: 8.5in) {
    artículo {
        columnas-plantilla-cuadrícula:
            1fr 5% [inicio] 15% 60% 15% [fin] 5% 1fr;
    }
}

Dividimos nuestra columna de contenido en tres columnas: 1.25 pulgadas 5 pulgadas 1.25 pulgadas. También agregamos porcentajes proporcionales para nuestra consulta de medios: 15% 60% 15%. El plan es que el texto abarque nuestra columna de contenido original de 7.5 pulgadas y que las imágenes pequeñas abarquen nuestra nueva columna de 5 pulgadas.

Para agregar imágenes, utilizamos el elemento img y su atributo src-source-source:

        ...
        
            
            
            
            
        
        ...

Estos son locales, es decir, están en nuestra computadora. Y si fueran remotos, es decir, en un servidor:

Tenga en cuenta que cada img tiene una de cuatro clases: size- *. Y debido a que queremos más que imágenes, como videos, para abarcar la cuadrícula de nuestro sitio web, es preferible que usemos clases para poder reutilizar el CSS. Estas clases size- * también son clases de utilidad, por lo que cambiar el tamaño que queremos es simple.

Hagamos que nuestras clases size- * abarquen diferentes conjuntos de columnas:

.size-1 {grid-column: 4/5; }
.size-2 {grid-column: 3/6; }
.size-3 {grid-column: 2/7; }
.size-4 {grid-column: 1/8; }

Lo que falta es que nuestras imágenes no responden. Nosotros necesitamos:

img.size-1, img.size-2, img.size-3, img.size-4 {ancho: 100%; }

Debido a que las imgs se renderizan a su tamaño real, por ejemplo, una representación de imagen de 400 × 400 a 400px, necesitábamos anular ese comportamiento con el nuestro: ancho: 100%. Por lo tanto, cuando una imagen se atribuye con una clase size- *, puede cambiar el tamaño a las columnas que abarca. Tenga en cuenta que no necesitamos establecer la altura.

Agregar elementos de texto

¿Prefieres el video? Haga clic aquí para abrir en Scrimba

Sitio web y enlaces de contenido

Ahora que nos estamos tomando en serio nuestro artículo, hagamos las cosas formales:

        ...
        
        ...

Ahora cada artículo es enlazable. Enlazable? Bueno, los sitios web son enlaces:

https://website.com/index.html

Y también se puede vincular el contenido de nuestro sitio web, por ejemplo, artículos:

https://website.com/index.html#article

Aquí el artículo es el valor de un atributo de identificación, análogo a la vinculación de una marca de tiempo en un video de YouTube (por ejemplo, este). Mejor que sugerir "comenzar a los 4 minutos y 7 segundos" o "leer el segundo artículo", podemos vincular contenido en nuestro sitio web, como una marca de tiempo en un video.

Para vincular un sitio web o contenido, utilizamos el elemento a y el atributo href:

        ...
        
        ...

El texto "El cosmos" ahora vincula el comienzo del artículo: # the-cosmos.

Esta idea de vincular (vincular sitios web y contenido en sitios web) es uno de los puntos de HTML. HyperCard dominó esto, pero en lugar de vincular sitios web y contenido, estaba interesado en ideas y asociaciones. En ese momento, era 1987 y HTML se propuso por primera vez en 1989. Mire unos segundos del video que publiqué anteriormente; aquí he vinculado una marca de tiempo:

Elementos de texto

Agreguemos encabezados, una fecha de publicación, texto fuerte y enfatizado, y enlaces:

    

El Cosmos es todo lo que hay

    

O alguna vez fue, o será alguna vez

    
    

Hace una generación , el astrónomo Carl Sagan se paró aquí y lanzó cientos de millones de nosotros en un Gran aventura la exploración del universo revelada por la ciencia. Es hora de empezar de nuevo. Estamos a punto de comenzar un viaje que nos llevará de lo infinitesimal a lo infinito, desde los albores del tiempo hasta el futuro lejano. Exploraremos galaxias, soles y mundos, surfearemos las ondas de gravedad del espacio-tiempo, encontraremos seres que viven en fuego y hielo, exploraremos los planetas de las estrellas que nunca mueren, descubriremos átomos tan masivos como los soles y universos más pequeños que los átomos.     

    
    

COSMOS TAMBIÉN ES UNA HISTORIA SOBRE NOSOTROS

    

Es la saga de cómo bandas errantes de cazadores y recolectores llegaron a las estrellas, una aventura con muchos héroes. Para hacer este viaje, necesitaremos imaginación. Pero la imaginación por sí sola no es suficiente porque la realidad de la naturaleza es mucho más maravillosa que cualquier cosa que podamos imaginar. Esta aventura es posible gracias a generaciones de buscadores que se adhieren estrictamente a un conjunto simple de ideas de prueba de reglas mediante experimentación y observación, se basan en las ideas que pasan la prueba, rechazan las que fallan, siguen la evidencia donde sea que conduzca y cuestionan todo. Acepta estos términos, y el cosmos es tuyo.     

Estas son las primeras líneas de nuestro astrofísico personal - Neil deGrasse Tyson - 2014 Cosmos: A Spacetime Odyssey, una reinvención del original Cosmos de 1980 de Carl Sagan: un viaje personal. Es ciencia ficción sin el -fi. ¡Y se renueva en 2019!

Arriba presentamos algunos elementos: h1, h2, h3, tiempo, fuerte y em.

  1. Los elementos h1 – h6 son titulares.
  2. El elemento de tiempo marca el tiempo de nuestro artículo. Podemos poner lo que queramos para el valor del elemento, porque las computadoras leen el valor del atributo datetime, que debería ser legible por máquina.
  3. El elemento fuerte es para texto fuerte y el elemento em es para texto enfatizado. Además, los elementos h * son fuertes.

Tenga en cuenta que los elementos h * y p se rompen de una línea a la siguiente, o se bloquean, mientras que los elementos time, strong y em no. Esto se debe a que los navegadores configuran la visualización del elemento h * y p para bloquear, y la visualización del tiempo, fuerte y del elemento em en línea.

Rems y ems

Cuando no es suficiente bloquear elementos de una línea a la siguiente, utilizamos saltos de línea para que sea más fácil diferenciar los elementos entre sí, a diferencia de los rellenos o las canaletas. Podríamos usar elementos br aquí, pero es preferible que usemos CSS extraños sobre HTML extraños.

A continuación, le mostramos cómo impulsar el contenido en dos saltos de línea, siguiendo los elementos h2 y p:

h2, p {margen inferior: 2.4rem; }

2.4rem?

¿Recuerdas nuestro reinicio? Configuramos la fuente en 20px / 1.2 sans-serif. No lo expliqué en ese momento, y me avergüenzo, pero 2.4 es saltos de dos líneas a 1.2 de altura de línea, por ejemplo, texto de espacio simple. El texto más legible podría ser 1.5, y el texto a doble espacio podría ser 2.

* Ejem * ¿Qué son los rems?

* Ejem ejem * ¿Y qué son los ems?

rem es root em y ambos son multiplicadores. 1rem es 20px y 1em es el tamaño de fuente de los padres. Si hubiéramos definido nuestros saltos de línea en ems, no rems, y hubiéramos establecido h2 y p en diferentes tamaños de fuente, ¡sus saltos de línea serían diferentes! Por lo tanto, los saltos de línea consistentes usan rems y los inconsistentes usan ems.

Y esta es una idea poderosa: escribir CSS de manera que el diseño esté conectado. Dada esta iluminación, creo que es mucho más sabio pensar en CSS no en reglas sino en relaciones. Por lo tanto, si hacemos un cambio en algún lugar, podemos hacer un cambio en todas partes.

... hacer un cambio en alguna parte ...
... hacer un cambio en todas partes ...
Un verdadero emoji de Apple. Tenía un comunicado de prensa

Diseño receptivo receptivo

¿Qué sucede si escribimos CSS en rems y ems, y utilizamos consultas de medios para cambiar: el tamaño de fuente de la raíz? Entonces todo, y quiero decir todo, cambiará de tamaño proporcionalmente. Podemos ir incluso un paso más allá y tener múltiples consultas de medios para múltiples anchos:

@media (ancho máximo: 8.5in) {: root {font-size: 18px; }}
@media (max-width: 5.0in) {: root {font-size: 16px; }}

Lo sorprendente de esto es que no solo estamos anulando una propiedad, estamos anulando la propiedad para rems y ems. Ahora podemos escribir CSS que no solo responda sino que responda a nuestro diseño receptivo. Esta es quizás la oración más importante en toda esta publicación:

Podemos escribir CSS que no solo responda sino que responda a nuestro diseño receptivo.

Esto no es simplemente genial, es cómo debemos escribir CSS. Los sitios web tienden a ser terribles, y creo que se puede reducir a esto: cuando escribimos CSS, debemos escribir en sistemas de diseño y no en código de silo. Cuando usamos rems y ems en conjunto con las consultas de medios, ese es un sistema de diseño y el código no está aislado.

Texto de estilo

Por amor al estilo, agreguemos algunos:

h1 {font: 700 2.0rem / 1.2…; color: hsl (000, 000%, 33%); }
h2 {font: 400 1.5rem / 1.2…; color: hsl (000, 000%, 33%); }
tiempo {font: 700 1.0rem / 1.2 ...; color: hsl (250, 100%, 83%); }
h3 {font: 700 1.0rem / 1.2…; color: hsl (250, 100%, 67%); }
p {font: 400 1.0rem / 1.5…; color: hsl (000, 000%, 33%); }

Las propiedades pueden tener shorthands como hemos visto antes; relleno: 0.5in, equivalente al relleno: 0.5in 0.5in. Y aquí, usamos la fuente para combinar el peso de la fuente, el tamaño de la fuente y la altura de la línea. Después de la fuente, tenemos color con valores hsl, como los valores hsla en nuestro depurador.

Un problema no abordado es nuestro elemento. En nuestro reinicio, desactivamos el color y la decoración del texto, lo que hace que los enlaces sean indiscriminados del texto. Desarmamos estas propiedades porque la decoración de texto: el subrayado es demasiado sutil. Así es como podemos darles un fuerte subrayado:

a {box-shadow: recuadro 0 -0.25em hsl (55, 100%, 75%); }

Invertimos box-shadow para crear un subrayado que está dentro del elemento. Si hubiéramos insertado sin un valor negativo, nuestro subrayado sería un exceso. También usamos em para que el subrayado se escale con su tamaño de fuente. Este es un ejemplo de cuándo queremos una escala inconsistente, como se supone para nuestros saltos de línea.

Hay mucho más que Box-shadow que esto: haga clic para obtener más información.

Último paso: gradientes

¿Prefieres el video? Haga clic aquí para abrir en Scrimba

Wohoo! Todo lo que necesitamos es una señal para nuestros lectores sobre dónde comienza y termina un artículo. Sin eso, los extremos de cada artículo se sentirán como una continuación sin fin, lo que lleva a una mala experiencia del usuario. Así que tenemos que darles a nuestros lectores una pista ... (◔̯◔)

Lo que propongo es simple: un gradiente que se extiende desde la parte superior de cada artículo hasta la parte inferior de su elemento h2. Y podemos escribir nuestro gradiente en ems para que a medida que nuestro sitio web cambie de tamaño, también lo haga nuestro gradiente:

artículo {
    ...
    fondo: gradiente lineal (hsl (55, 100%, 96%), blanco 6.83em);
}

Aquí definimos un gradiente de color a blanco y utilizamos 6.83em para que nuestro gradiente no extienda todo el artículo, sino que termine en el equivalente de la parte inferior de nuestro elemento h2. Sin embargo, el valor exacto depende.

Puede hacer cálculos matemáticos para determinar el tamaño, por ejemplo, 6.83em, pero otra técnica es establecer un tamaño en el color superior, por ejemplo hsl (55, 100%, 96%) 6.83em. Una vez que sea igual o mayor que el tamaño del color inferior, aparecerá como una línea y no como un degradado, lo que hace que sea intuitivo a qué cambiarlo.

Felicidades

El blog que construimos! ¿Prefieres el video? Haga clic aquí para abrir en Scrimba

¡Felicidades! ٩ (˘.˘) ۶ Has entrado en un mundo que necesita desesperadamente mejores diseñadores e ingenieros. Y con CSS Grid, Flexbox, Responsive Design y depuradores a nivel de navegador, el desarrollo para la web nunca ha sido tan accesible.

No olvide que hay un curso gratuito sobre Scrimba donde enseño cómo hacer el mismo sitio web desde cero. Haga clic aquí para inscribirse!