221

Crea el Periódico de los Simpsons con CSS

7505Puntos

hace 4 meses

Curso de Diseño Web con CSS Grid y Flexbox
Curso de Diseño Web con CSS Grid y Flexbox

Curso de Diseño Web con CSS Grid y Flexbox

Domina Flexbox y CSS Grid para construir diseños web de nivel superior. Familiarízate con los términos, herramientas, flujos de trabajo y tendencias de diseño más importantes del desarrollo frontend profesional. Obtén el poder de crear layouts o sistemas de diseño estables y escalables para cualquier proyecto. Aprende a trabajar con el CSS del presente y futuro junto a tu profesora Estefany Aguilar.

¡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. 😉

Periódico de los Simpsons

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

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.

Apu y Homero Simpson

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:

Estructura principal

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í:

<divclass="newsletter"><sectionclass="name"></section><sectionclass="info"></section><sectionclass="title"></section><sectionclass="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.

Gafas de Homero

Se vería de la siguiente forma:

Estructura secundaria - 1
Estructura secundaria - 2

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

<divclass="newsletter"><sectionclass="name"><p>Springfield Shopper</p></section><sectionclass="info"><p>DAILY NEWS</p><p>35¢</p></section><sectionclass="title"><h1><span>Simpsons scam</span><span>Springfield</span></h1></section><sectionclass="content"><articleclass="left-side"><h2><span>Angry Mob</span><span>Mulls Options</span></h2><div><p>Lorem ipsum...</p><p>Lorem ipsum...</p></div></article><articleclass="right-side"><imgsrc="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

<divclass="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

<sectionclass="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

<sectionclass="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

<sectionclass="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

<sectionclass="content"><articleclass="left-side">...</article><articleclass="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:

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:

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

Periódico de lo Simpsons

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!

Curso de Diseño Web con CSS Grid y Flexbox
Curso de Diseño Web con CSS Grid y Flexbox

Curso de Diseño Web con CSS Grid y Flexbox

Domina Flexbox y CSS Grid para construir diseños web de nivel superior. Familiarízate con los términos, herramientas, flujos de trabajo y tendencias de diseño más importantes del desarrollo frontend profesional. Obtén el poder de crear layouts o sistemas de diseño estables y escalables para cualquier proyecto. Aprende a trabajar con el CSS del presente y futuro junto a tu profesora Estefany Aguilar.
Estefany
Estefany
teffcode

7505Puntos

hace 4 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
11
7739Puntos

ohh que ejercicio práctico tan llamativo! Me pondré manos a la obra 🔨

3
7505Puntos
4 meses

Esooo !!! Me muestras tu resultadooo 💚😊

6
7739Puntos
4 meses
Captura.PNG

Listones, con un poco de esfuerzo ya quedó. Codigo aqui
Mas retos como este porfavor! 🙌

2
9875Puntos
3 meses

Muy buen trabajo, te recomiendo usar la propiedad de flex-wrap

2
5050Puntos
3 meses

Hola Brayan!, me gustó mucho tu trabajo. ¿Podría usar tu código para un tutorial en Platzi Blog?

2
7739Puntos
3 meses

Hola Joaquin, claro que si, seria un gusto! 😄
Muchas gracias Jorge por el consejo, lo tendré en cuenta para un proximo reto o proyecto 😉

6

Diseñe mi propia versión, basándome también en un periódico.
Aqui el link
newsletter.png

4
1160Puntos

Buen aporte!!

2
7505Puntos
4 meses

🥰💚👏🏼

4
11823Puntos

No es mucho, pero es trabajo honesto :’ )
Están muy buenos estos retos 😄

simpsons_newspapper.png
4
252Puntos

Este fue mi intento 😄 traté de utilizar la metodología BEM con lo aprendido en el Curso de Frontend Developer, además de media queries.
Dejo el repo : https://github.com/dionej11/Periodico
periodico.PNG

2
4516Puntos
3 meses

Muy bueno Dani !! Por cierto me ha encantado tu web, enhorabuena !

3
3599Puntos

Quedó increible y me ayudó a entender la idea principal de la maquetación. Juntar HTML y CSS desde el diseño.
Muchas gracias!

2
7505Puntos
4 meses

Ayyy ! No sabes cuánto me alegra… 💚👏🏼😊

3
6890Puntos

Lo haré con Tailwind… 😉

3
7505Puntos
4 meses

UFFFFFF 🔥🔥🔥 Por favorrrrr… encantadísima de ver el resultado con Tailwind !!! 😍

3
4516Puntos

Voy a intentarlo !! Justo hoy terminé con tu curso de CSS Grid.

3
7505Puntos
4 meses

Wiiiiiii 😍 Esooo !!! Por aquí espero el resultado con ansias 😍

3
8060Puntos

¡Qué espectacular esto! Me voy a poner manos a la obra el fin de semana.

2
7505Puntos
4 meses

Siiiiii 😍 de una !!! Me muestras qué tal te quedaaa 💚

3
4979Puntos

¡Hola!
Se ve muy interesante; ya que llegue a esa parte de los cursos lo intentaré junto al de Glassmorphism. Sin embargo, también me gustaría saber, ¿cómo haces tus bosquejos?, por la manera en qué se ven, pareciera iPad con Apple Pencil y alguna app de iOS. ¿Es correcto?

4
7505Puntos
4 meses

Súper Jorge !!! Maravillosooooo… 💚

Sí, uso iPad y iPad Pencil con una app que amo infinito llamada Procreate 🎨

0
4979Puntos
3 meses

Muy bien, para tomarlo en cuenta. ¡Muchas gracias!

3
1224Puntos

Dejaré por aquí mi humilde aporte.
Me gustó muchísimo hacerlo.
Captura.PNG

3
8379Puntos

Que geniaaaaaaaaal. Me pongo en ello de una 💚

3
7505Puntos
4 meses

Wiiiii 💚 Por aquí feliz de ver el resultadoooo 😍

3
3351Puntos

No sé ustedes, pero a mí me encantaría que el fondo que agregan al periódico se sienta más real, el periódico no es #fff es más como una textura y la forma más fácil es con un background-image: url(https://fondosmil.com/fondo/2824.jpg) y queda así
Reto Periodico Con Background-image

2
5533Puntos

Yo quise hacerlo con Ionic para practicarlo 😃
photo5170342744470694340.jpg

2
5131Puntos

Me hubiera encantado encontrar la fuente original del name, pero ahí cumplido el reto 🤣

2
9936Puntos

Excelente ejercicio, me sirvió bastante para practicar lo aprendido en el curso.

Simpson's Newsletter.png
1
3213Puntos

Dejó aquí mi aporte😜. ¡Todo un reto!

PlatziReto.png
1
9483Puntos

Les comparto mi resultado que implemente en mi sitio personal que estoy creando aun le faltan varios elementos como el about me y mi portafolio de proyectos pero me gusto tanto esto que me esforcé créanme en hacerlo ❤️

Si lo quieren ver en mi sitio es https://stonks.company

1
10656Puntos

Me gustó mucho este reto, asi que decidí hacerlo, les comparto mi resultado final. 👨🏾‍🚀🚀

Codepen-link

retocss.JPG
0
5725Puntos

Que buen ejercicio!! Aquí comparto el mío.
Simpsons.PNG

0
6787Puntos

Saludos amigos de Platzi. Esto no tiene que ver con CSS pero no dudo que haya fans de los Simpson en Platzi. Existe un divertida Casita del horror de los Simpson como Homero no vacuna su computadora termina infectando a todos los dispositivos. Entonces Homero intenta servirse leche y se derrama por todos lados menos por el orificio correspondiente y dice Lisa “Tiene un microchip” porque hoy en día casi todo tiene un microchip. Entonces una vez más los Simpson se adelantaron a su época.

0
5273Puntos

Lo pasé bien haciendo este desafío. Aunque en gran parte teffcode maquetó todo, nosotros solo colocamos las reglas correspondiente a los contenedores. Siempre se aprende algo nuevo por muy simple que parezca todo.
Esperamos el desafio con CSS Grid.

index.PNG
0
3799Puntos

me entro weba a la mitad y salió esto:

0
5804Puntos

Hola a todos, @teffcode gracias por estos retos, motivan mucho y nos fortalecen el desarrollo de habilidad y practicidad. A continuación comparto mi resultado:

>>> Enlace a Codepen.io <<<

0
4516Puntos

Hola @teffcode acabo de terminar tu curso de CSS Grid y me dispongo a empaparme del otro curso de CSS y Flexbox. Voy a tardar más en hacer el reto del periódico porque quiero primero aprender más sobre los cursos, como bien recomiendas al principio del reto. Sin embargo, como no sé cómo contactarte, me gustaría enseñarte un clon que he hecho de Facebook después de hacer tu curso de CSS Grid. Estoy intentando mejorar haciendo clones con mi propio código de otros diseños webs.

PD: Pido disculpa a mis compañeros y compañeras por compartir aquí un trabajo diferente al del reto pero quería agradecerle a la profesora por su curso.

![](Captura de pantalla 2021-04-17 a las 12.53.25.png

3
3410Puntos
3 meses

Puedes arrobarla en twitter mostrando tu trabajo 😄

0
4516Puntos
3 meses

Gracias por el consejo amigo, es que no tengo redes sociales. Sólo uso Platzi. Pero creo que me haré una cuenta de Twitter para poder compartir mis futuros trabajos.