¡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:
Te propongo que realices los siguientes 5 pasos para completar el reto:
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!
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í:
<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).
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:
<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.
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:
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:
<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.
<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?
<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.
<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.
<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.
<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:
<article>
.<h2>
.<div>
.<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.
<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.
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:
¡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!
ohh que ejercicio práctico tan llamativo! Me pondré manos a la obra 🔨
Esooo !!! Me muestras tu resultadooo 💚😊
Listones, con un poco de esfuerzo ya quedó. Codigo aqui
Mas retos como este porfavor! 🙌
Muy buen trabajo, te recomiendo usar la propiedad de flex-wrap
Hola Brayan!, me gustó mucho tu trabajo. ¿Podría usar tu código para un tutorial en Platzi Blog?
Hola Joaquin, claro que si, seria un gusto! 😄
Muchas gracias Jorge por el consejo, lo tendré en cuenta para un proximo reto o proyecto 😉
A mío le agregué perspectiva 3D y hasta una animación de giro cuando carga la página :3
Les dejo el link al CodePen por si quieren darle un vistazo:
https://codepen.io/retaxmaster/pen/PoWBPmQ
Y también el link al repo de GtHub uwu:
https://github.com/RetaxMaster/periodico-los-simpson
Muy bueeeeno !!
Así quedó el reto, les dejo el Codepen por si quieren ver el co’digo https://codepen.io/rafaelmorales79/pen/OJWEBKO
Me animé a intentarlo 😄
Aquí está mi resultado en netlify y en codepenhttps://codepen.io/sxbino/pen/YzNLMxM
Este es mi resultado final. Espero les guste. Mi objetivo es trabajar como front-end en Platzi. 😄
https://codepen.io/edmanrique/pen/KKaRjmO
Por si quieren ver el código!
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
Muy bueno Dani !! Por cierto me ha encantado tu web, enhorabuena !
Diseñe mi propia versión, basándome también en un periódico.
Aqui el link
No es mucho, pero es trabajo honesto :’ )
Están muy buenos estos retos 😄
Aquí les dejo el link del mío ✊💚
https://gfreyjs.github.io/Clon-del-Periodico-de-los-Simpsons/
😁 Fue muy divertido… Estaba tan concentrado con los cursos de JavaScript que creí que ya se me había olvidado lo que aprendí con la profe Teff , pero no!.
Chauu! 🤙 ✌️ 🏃♂
Acá está mi reto culminado.
El código
esta muy cool :0
Super, Vamos a intentarlo!
Así quedó el reto, lo hice en Codeopen https://codepen.io/German_Guz/pen/RwKydqY
AMOOOOOO !!! 😍 Te quedó espectacular… 👏🏼
Buen aporte!!
🥰💚👏🏼
Les comparto mi versión, este es el link de acceso 😄
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í
¡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?
Súper Jorge !!! Maravillosooooo… 💚
Sí, uso iPad y iPad Pencil con una app que amo infinito llamada Procreate 🎨
Muy bien, para tomarlo en cuenta. ¡Muchas gracias!
Dejaré por aquí mi humilde aporte.
Me gustó muchísimo hacerlo.
Te quedo Genial
Lo haré con Tailwind… 😉
UFFFFFF 🔥🔥🔥 Por favorrrrr… encantadísima de ver el resultado con Tailwind !!! 😍
¡Qué espectacular esto! Me voy a poner manos a la obra el fin de semana.
Siiiiii 😍 de una !!! Me muestras qué tal te quedaaa 💚
Uy! de una parce. ❤️ ^-^
Hahaha !!! 💚💪🏼
Que geniaaaaaaaaal. Me pongo en ello de una 💚
Wiiiii 💚 Por aquí feliz de ver el resultadoooo 😍
Voy a intentarlo !! Justo hoy terminé con tu curso de CSS Grid.
Wiiiiiii 😍 Esooo !!! Por aquí espero el resultado con ansias 😍
Quedó increible y me ayudó a entender la idea principal de la maquetación. Juntar HTML y CSS desde el diseño.
Muchas gracias!
Ayyy ! No sabes cuánto me alegra… 💚👏🏼😊
Muy tarde, pero weno muy interesante reto
Por si quieren ver el codigo
¡Excelente reto, @teffcode! Ojala subas más retos que podamos completar y subir a nuestros portafolios. 😃
Aquí está mi resultado: https://codepen.io/ivanr3d/pen/VwpjEWo
Me hubiera encantado encontrar la fuente original del name, pero ahí cumplido el reto 🤣
Excelente ejercicio, me sirvió bastante para practicar lo aprendido en el curso.
Yo quise hacerlo con Ionic para practicarlo 😃
Comparto mi reto para que puedan darme ese feedback que tanto requerimos los que iniciamos en este mundo. Se me hizo sencillo, ya que pienso que domino bien Flexbox.
Modo Pc:
![](
Modo Movil:
![](
Mejor tarde que nunca jaja
Aquí esta mi intento de periódico:
Les dejo el link de github:
<ahref="https://github.com/zenif2005man/Angry-Mop-Mulls-Options">Code</a>
Aquí esta mi intento de periódico:
Les dejo el link de github:
<ahref="https://github.com/zenif2005man/Angry-Mop-Mulls-Options">Code</a>
No se porque se duplico, espero puedan agregar una opción de edición para poder corregir errores, porfis :-_
Here’s mine:
Check it out in Codepen
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
Pagina: https://johndeev.github.io/theSimpsonsNewspaper/
Repositorio:https://github.com/JohnDeev/theSimpsonsNewspaper
le agregue la animacion de rotacion con la pseudo clase :hover
Hola!!! Les comparto mi resultado.
https://codepen.io/CORYMALAVE/full/KKaBRZV
¡Genial!
Aquí esta el mío.
Aquí esta el código por si alguien lo quiere ver
https://github.com/davidsgv/the-simpsons-newspaper
mds
Dejó aquí mi aporte😜. ¡Todo un reto!
Me gustó mucho este reto, asi que decidí hacerlo, les comparto mi resultado final. 👨🏾🚀🚀
Codepen-link
Reto cumplido 😊😊
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.
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 <<<
Aqui dejo mi respuesta al reto.
https://codepen.io/YoanMalaver/pen/vYgzLbv
Ahí les va!
https://codepen.io/sunjinglama/pen/LYxBaQR
Que buen ejercicio!! Aquí comparto el mío.
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.
![](
Puedes arrobarla en twitter mostrando tu trabajo 😄
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.
me entro weba a la mitad y salió esto:
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.
ME ENCANTO!