Crea el Periódico de los Simpsons con CSS

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez vamos a crear el clon de un periódico de Los Simpsons con HTML y CSS (especialmente Flexbox).

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

Antes de empezar, te recomiendo tomar los siguientes cursos en Platzi:

• Curso de Frontend Developer
• Curso de CSS Grid Layout
• Curso de Diseño Web con CSS Grid y Flexbox

Paso 0: planeación

Te propongo que realices los siguientes 5 pasos para completar el reto:

1. Crea la estructura de HTML para los elementos principales
2. Crea la estructura de HTML para los elementos secundarios
3. Usa Flexbox para alinear los elementos de cada estructura de HTML
4. Embellece tu periódico usando otras propiedades de CSS
5. ¡Compártenos tu resultado en los comentarios!

Recomendación: evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: crea la estructura de HTML para los elementos principales

El primer paso es reconocer cuáles son los elementos principales que hacen parte de la estructura inicial de nuestro periódico. Debemos colocarnos “las gafas de desarrollador(a)” para ver nuestros elementos a alto nivel.

Pero ¡momento! No estoy hablando de unas gafas como las que tiene Homero en la imagen de arriba, sino de unas que nos permitirán tener un conocimiento amplio de la estructura visual de nuestro periódico para llevarlo a código HTML.

Necesitamos unas gafas súper poderosas como las siguientes:

Con estas gafas haremos un escáner de nuestro periódico para identificar cada una de sus partes principales.

Este fue mi escaneo:

Si pasamos por alto la estructura HTML por ir inmediatamente al código CSS, ni siquiera vamos a saber qué estamos maquetando. La clave de un buen CSS es tener primero un buen HTML. Identificar esta estructura nos va a permitir organizar muy bien nuestro HTML para saber exactamente qué debemos lograr con CSS.

Teniendo en cuenta lo anterior, tendríamos una estructura de HTML así:

<div class="newsletter">
  <section class="name"></section>
  <section class="info"></section>
  <section class="title"></section>
  <section class="content"></section>
</div>

Nota: los nombramientos de clases y etiquetas HTML puedes modificarlas a tu gusto.

Pueden existir muchas formas de crear esta estructura inicial. Aquí te comparto la forma que me gusta y que más recomiendo, que es precisamente seguir el flujo normal del documento.

Para nosotros (en Latín) este flujo normal del documento es de arriba hacia abajo, basándonos en la dirección en la que leemos los textos, que va de izquierda a derecha, pero una vez terminamos seguimos en el renglón de abajo.

Y es el mismo comportamiento de todos los elementos de tipo bloque (como <div>, <section> o <p>) por defecto (ubicarse uno debajo del otro).

Paso 2: crea la estructura HTML para los elementos secundarios

Con los elementos principales identificados debemos quitarnos “las gafas de desarrollador(a)” y comenzar a ver los elementos a bajo nivel, es decir, entrar en el detalle de cada estructura principal.

Se vería de la siguiente forma:

Ahora vamos a traducir este mapa visual a HTML de la siguiente manera:

<div class="newsletter">
  <section class="name">
    <p>Springfield Shopper</p>
  </section>
  
  <section class="info">
    <p>DAILY NEWS</p>
    <p>35¢</p>
  </section>
  
  <section class="title">
    <h1>
      <span>Simpsons scam</span>
      <span>Springfield</span>
    </h1>
  </section>
  
  <section class="content">
    <article class="left-side">
      <h2>
        <span>Angry Mob</span>
        <span>Mulls Options</span>
      </h2>
      <div>
        <p>Lorem ipsum...</p>
        <p>Lorem ipsum...</p>
      </div>
    </article>
    
    <article class="right-side">
      <img src="https://i.ibb.co/f8SdZ9Y/Screen-Shot-2021-04-09-at-2-28-04-PM.png" alt="Foto de la familia Simpson">
      <p>Lorem ipsum...</p>
    </article>
  </section>
</div>

Aquí ya tendríamos toda nuestra estructura de HTML completamente lista para ser estilizada. Si quieres, puedes añadir más clases usando alguna metodología como BEM o, puedes dejarlo así y hacer uso de los diferentes selectores para la estilización.

Paso 3: usa Flexbox para alinear los elementos de cada estructura de HTML

Comenzar a añadir CSS a nuestro HTML puede hacerse de diversas maneras. En este reto te propongo alinear todas las mini estructuras primero con Flexbox, pero estás en toda la libertad de hacerlo como más te guste. Aquí lo más importante es poner a prueba nuestros conocimientos en Flexbox. 😃

Para alinear elementos con Flexbox debemos tener en cuenta que existen propiedades tanto para los elementos padre como para los elementos hijos, es importante reconocer quién es quién. Y, justo en este paso, es donde cobra muchísimo más sentido la elaboración de nuestros dos pasos anteriores.

Te recomiendo:

1. Separar mentalmente cada mini estructura.
2. Por cada mini estructura, pregúntate cómo es la alineación que deseas obtener (horizontal o vertical) y también, si esa alineación la hace el padre o la hace cada hijo por individual.

Para tener más claridad sobre qué propiedad usar e identificar si debe ser el padre o el hijo el que debe alinear, te recomiendo que hagas el Curso de Diseño Web con CSS Grid y Flexbox que hemos diseñado especialmente para resolver estas dudas. También, puedes basarte en esta guía de CSS Tricks.

Teniendo en cuenta mi recomendación anterior, cada mini estructura quedaría de la siguiente forma:

Mini estructura # 1: contenedor principal

<div class="newsletter">
    ...
</div>

Esta estructura de HTML no necesitaría nada de Flexbox, ya que, cada elemento dentro de él (es decir, cada <section>) es de tipo bloque y una de las características de estos elementos es que se ubican uno abajo del otro por defecto.

Mini estructura # 2: Nombre del periódico

<section class="name">
    <p>Springfield Shopper</p>
</section>

Esta estructura de HTML podría utilizar Flexbox para centrar el texto dentro de él. ¿Qué propiedades usarías para esto?

Mini estructura # 3: tipo de periódico y precio

<section class="info">
    <p>DAILY NEWS</p>
    <p>35¢</p>
</section>

Para esta estructura de HTML usaríamos Flexbox para ubicar a ambos lados (izquierdo y derecho) los dos textos dentro de él. ¿Qué propiedades usarías para esto?

Ten en cuenta que hay un espacio en medio entre ambos elementos.

Mini estructura # 4: título de la noticia

<section class="title">
    <h1>
      <span>Simpsons scam</span>
      <span>Springfield</span>
    </h1>
</section>

Esta estructura de HTML podría utilizar Flexbox para centrar el texto <h1> y para ubicar cada <span> uno debajo del otro. ¿Qué propiedades usarías para esto?

Puedes basarte en la respuesta de la mini estructura # 2 y buscar una propiedad que te permita cambiar la dirección de row (por defecto) a column.

Mini estructura # 5: Contenedor principal de la noticia

<section class="content">
    <article class="left-side">...</article>
    
    <article class="right-side">...</article>
</section>

Para esta estructura de HTML usaríamos Flexbox para ubicar a ambos lados (izquierdo y derecho) los dos elementos dentro de él. ¿Qué propiedad o propiedades usarías para esto?

Aquí puedes basarte en el comportamiento que tienen por defecto los elementos hijos al adicionarle únicamente la propiedad y valor display: flex al elemento padre.

Mini estructura # 6: lado izquierdo de la noticia

<article class="left-side">
    <h2>
        <span>Angry Mob</span>
        <span>Mulls Options</span>
    </h2>
    <div>
        <p>Lorem ipsum...</p>
        <p>Lorem ipsum...</p>
    </div>
</article>

Aquí tenemos:

• Un elemento padre: <article>.
• Un elemento hijo que también es padre: <h2>.
• Un elemento hijo que también es padre: <div>.
• Dos elementos nietos: <p>.

Lo anterior nos ayuda a reconocer qué propiedades puedo aplicar a cada elemento, por ejemplo:

• <article> → Propiedades para elementos padre.
• <h2> → Propiedades para elementos padre e hijo (Sí, ambas).
• <div> → Propiedades para elementos padre e hijo (Sí, ambas).
• <p> → Propiedades para elementos hijo.

Para esta estructura de HTML <article> no necesitaría nada de Flexbox, ya que cada hijo directo (es decir, el <h2> y el <div>) es de tipo bloque y una de las características de estos elementos es que se ubican uno abajo del otro por defecto.

Sin embargo, los hijos de <div> están ubicados uno al lado del otro. ¿Qué propiedad o propiedades usarías para esto?

Aquí puedes basarte en el comportamiento que tienen por defecto los elementos hijos al adicionarle únicamente la propiedad y valor display: flex al elemento padre.

Adicionalmente, necesitamos ubicar cada <span> que está dentro de <h2> uno debajo del otro. ¿Qué propiedades usarías para esto?

Puedes basarte en la respuesta de la mini estructura # 4.

Mini estructura # 7: lado derecho de la noticia

<article class="right-side">
    <img src="https://i.ibb.co/f8SdZ9Y/Screen-Shot-2021-04-09-at-2-28-04-PM.png" alt="Foto de la familia Simpson">
    <p>Lorem ipsum...</p>
</article>

Esta estructura de HTML no necesitaría nada de Flexbox, ya que, cada elemento dentro de él (es decir, cada <section>) es de tipo bloque y una de las características de estos elementos es que se ubican uno abajo del otro por defecto.

Paso 4: embellece tu periódico con más propiedades de CSS

En este paso quiero que seas muy libre para escoger los colores, tamaños de fuentes y tipografías. Para ello, te dejo las siguientes páginas:

• Color Names - HTML Color Codes → Nombres de colores por defecto en CSS
• Color Hunt → Paleta de colores
• Google fonts → Fuentes gratis

También te dejo una extensión de Chrome que te permite, entre otras cosas, obtener el código (en hexa, rgb, hsl, etc) de un color que te guste desde cualquier punto de tu navegador:

• ColorZilla → Para obtener colores

Paso 5: ¡Compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de tu periódico. 😄

Aquí te comparto mi codepen con el resultado final: Periódico de los Simpsons en CodePen

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta nueva sección.

#NuncaParesDeAprender

¡Me alegra muchísimo leer eso, Rubén!