Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

Reto 3: Maquetación de la pantalla de Not Found

35/43

Lectura

Cuando ocurre un error de tipo 404 en nuestra aplicación, es bueno que tengamos una pantalla que nos indique sobre este error. Por tal motivo, creamos la siguiente vista:

Ya hicimos en clases anteriores los componentes de Header y Footer, sólo debemos añadir dos cosas más:

  1. Un texto grande que diga 404 y que haga una pulsación parecida al latido de nuestro corazón. Sin embargo, puedes realizar la animación que más te guste. Te recomiendo mirar en CodePen algunos proyectos sobre animaciones. Aquí te dejo un ejemplo: https://codepen.io/levineuland/pen/AmwCL

  2. Un texto debajo del texto que dice 404 con el enunciado:

url

Aportes 669

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Yo decidí meter una imagen y que la animación fuera en ella. Solamente que no sé cómo hacer gif para mostrarlo. Si alguien sabe por favor dígame cómo.

Aquí la mía. El profe Leonidas me ayudó a encontrar el punto exacto de transform-origin del 4 en mi animación en la clase presencial de México 😄 Aquí en github para que la vean. Pueden revisar mi repo por si gustan replicarla 😃 https://betoarpi.github.io/platzi-video/404.html

Listo!
Use un pulse para el título un wobble para la imagen y un hinge para el subtitulo :3

EFECTO BOUNCE
CSS

.error__container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    min-height: calc(100vh - 200px);
}
.error__container--tittle{
    width: 100%;
    height: 300px;
    float: left;
    overflow: hidden;
}
.text-bounce {
    text-align: center;
    margin-top: 56px;
    color: #fff;
    font-size: 10.0em;
    text-transform: uppercase;
}
.animated {
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
.bounce {
    animation-name: bounce;
}
.error__container p{
    margin-top: -60px;
}

HTML (section para el efecto)

<section class="error__container">
        <section class="error__container--tittle">
            <h2 class="text-bounce animated bounce">404</h2>
        </section>
        <p>Página no encontrada</p>
    </section>

El reto esta disponible en este CodePen. Las animaciones las aplique al astronauta y al 404.

Quería hacer que el fondo de las estrellas también cambiaran de tamaño con la animación pero al ser una url insertada desde la propiedad background en CSS no pude hacer mucho, alguna sugerencia?

Comparto el reto.
El código de la maquina de café lo encontré acá : https://codepen.io/csspoints/pen/MWWawaK

Así va:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./Style.css">
    <title>Header</title>
</head>
<body>
    <header class="header">
        <img class="header__img" src="./assets/Logo.bmp" alt="">
        <div class="header__menu">
            <div class="header__menu--profile">
                <img src="./assets/user-icon.png" alt="">
                <p>Perfil</p>
            </div>
            <ul>
                <li><a href="/">Cuenta</a></li>
                <li><a href="/">Cerrar Sesion</a></li>
            </ul>
        </div>
    </header>
    <section class="error404">
        <img src="./assets/broken-404-icon.png" alt="Error404">
        <div class="error404__content">
            <div class="animationPulse animatedPulseRepeat">
                <h1>404</h1>
            </div>
            <h3>Pagina no encontrada</h3>
        </div>
    </section>
    <footer class="footer">
        <a href="/">Terminos de uso</a>
        <a href="/">Declaración de privacidad</a>
        <a href="/">Centro de ayuda</a>
        </footer>
    </body>
</html>


/*ERROR 404*/
.error404{
    background: linear-gradient(var(--dark-mode),var(--dark-light));
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    color: var(--light-mode);    
    min-height: calc(100vh - 140px);
}

.error404 img{
    width: 300px;
    display: block;
animation: animates 2s linear infinite alternate;
}
.error404 h1{
    text-align: center;
    font-size: 5.5rem;
    font-weight: 600;
    top: 9rem;
    color: rgba(255, 255, 255,.5)
}
.error404 h3{
    color: rgba(255, 255, 255,.7);
    margin: 2em auto;
    animation: animatestext 2s linear infinite alternate;
}
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
.animationPulse {
  animation-name: pulse;
  animation-duration: 1s;
}
.animatedPulseRepeat  {
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
  }

@media all and (max-width: 680px) {
    
    .error404__content {
    width: 100%;
    height: 55px;
    clear: both;
    margin: 0px auto;
   
  }
}

Esto fue lo que yo logre, mi pagina http cats 404.

Listo!! (Ignorar la calidad de la imagen >.<)

Reto cumplido la donut tiene la animacion de pulse

Realizado!

Para la animación elegí el de wobble.

¡Y bueno! Terminé de hacer la pantalla de error, aquí les presento mi versión mobile:

Y esta es mi versión desktop:

Pueden ver mi página aquí (la subí a Github Pages):
Platzi Video 404 by ArudoPE

Nose si se aprecie pero por alguna razon no me deja subir el gif y nose el motivo pero dejare foto de lo que hice

Aqui esta el page del not-found
https://michaelviloria.github.io/platzi-video/not_found/not-found.html
Repo completo del curso hasta el momento
https://github.com/michaelviloria/platzi-video

Asi quedo el mio 😃, lo hice sencillo pero a mi gusto
el snorlax es un gif

Tiene animacion para que parezca agitado 😂

.not-found img {
  height: 24rem;
  width: auto;
  animation: breath 2s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes breath {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

reto cumplido, lo hice con la misma animación pero no se nota 😦

Listo el reto, me recordo a una paleta 😋😋.

Listo !! el Fantasma le da la vuelta al 404…

Lo logre!!! 🤟

Completado…

Yo utilise una ilustración de una pagina llamada undraw.co o tambien puedes buscar en google ilustraciones en png o gif png

<section class="error">

        <div class="error__container">

            <h2 class="animated pulse">404</h2>
            <p>Página no encontrada</p>
            
        </div> 

    </section>

.error__container {
    color: white;
    padding: 60px 68px 40px;
    min-height: 600px;
    width: 300px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.error__container h2 {
    color: white;
    font-size: 80px;
    padding: 0;
    margin: 0;
}

.error__container p {
    color: white;
    font-size: 16px;
    padding: 0;
    margin: 0;
}

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
}

.animated {
    animation-duration: 2.1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}

Aqui lo que me salió

hola que tal a todos, aqui le dejo mi reto
http://emanuelmamani.esy.es/appVidio/404.html

reto cumplido.

Hola a [email protected];

Después de toda la mañana del sábado. LO he logrado.

Completado, ¡¡vamos x más!!

HTML

<section class="notfound">
        <div class="notfound__main">
            <div class="notfound__main--text">
                <div class="text animated pulse">404</div>
            </div>
            <div class="notfound__main--subtext">
                <p>Página no encontrada</p>
            </div>
        </div>
    </section>

CSS

.notfound__main {
    align-items: center;
    background: linear-gradient(#21c08b, #ab88ff);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc( 100vh - 200px );
    margin: 0px auto;
    overflow: hidden;
    width: 100%;
}

.notfound__main--text {
    font-weight: bold;
    color: #fff;
    font-size: 150px;
    font-family: 'Mulish', sans-serif;
    margin-top: 56px;
    text-transform: uppercase;
    text-align: center;
}

.notfound__main--subtext {
    font-weight: bold;
    color: #fff;
    font-size: 38px;
    font-family: 'Mulish', sans-serif;
    margin-top: 10px;
    text-transform: uppercase;
    text-align: center;
}

.animated {
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
.pulse {
    animation-name: pulse;
    animation-duration: 1s;
}

La carita llorando es la palpita.


.error
{
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 542px;
}
.error h1 
{
    font-size: 60px;
    margin-bottom: 15px;
    animation: corazon infinite;
    animation-duration: 2500ms;
}

@keyframes corazon
{
    0%
    {
        transform: scale(1);
    }

    50%
    {
        transform: scale(1.2);
    }

    100%
    {
        transform: scale(1);
    }
}

👍 #reto3 cumplido con latido de corazón animado 👍

Reto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet">
    <title>Error 404</title>
</head>
<style>
    body {
        margin: 0;
        font-family: 'Mulish', sans-serif;
        background: linear-gradient(#21C08B, #AB88FB);
        <!-- overflow-x: hidden; -->
    }

    .header {
        align-items: center;
        color: white;
        display: flex;
        height: 100px;
        justify-content: space-between;
        top: 0px;
        width: 100%;
    }

    .header__img {
        margin-left: 30px;
        width: 200px;
    }

    .main h3 {
        color: #fff;
        text-align: center;
        font-family: 'Mulish', sans-serif;
    }

    .text {
        text-align: center;
        margin-top: 56px;
        color: #fff;
        font-size: 5.0em;
        font-family: 'Mulish', sans-serif;
    }
    
    .animated {
        animation-duration: 2.5s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
    }
    
    @keyframes main {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-30px);}
        60% {transform: translateY(-15px);}
    }
    .main {
        animation-name: main;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0px;
        padding: 75px;
    }
    
    .footer {
        align-items: center;
        display: flex;
        height: 100px;
        width: 100%;
    }

    .footer a {
        color: white;
        cursor: pointer;
        font-size: 14px;
        padding-left: 30px;
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }
    @media only screen and (max-width: 600px) {
        .main__description--tittle {
            font-size: 30px;
        }
        .footer {
            align-items: flex-start;
            flex-direction: column;
        }
    }

</style>
<body>
    <header class="header">
        <img class="header__img" src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png" alt="">     
    </header>

    <div class="main">
        <!-- <img src="https://images.pexels.com/photos/4012960/pexels-photo-4012960.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> -->
        <h2 class="text animated main">Oops!... Error 404</h2>
        <h3>Disculpa, la página esta loca y no ha sido encontrada :)</h3>
    </div>

    <footer class="footer">
        <a href="/">Términos de uso</a>
        <a href="/">Declaración de privacidad</a>
        <a href="/">Centro de ayuda</a>
    </footer> 
</body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style/errorStyle.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&display=swap"
      rel="stylesheet"
    />

    <title>Error 404</title>
  </head>
  <body>
    <header class="header">
      <img class="header__img" src="./img/logoplatzi.png" alt="logoplatzi" />
    </header>
    <section class="mainError">
      <h1 class="mainError__404 text animated pulse">ERROR 404</h1>
      <h1 class="mainError__hinge text animated hinge">NOT FOUND</h1>
    </section>

    <footer class="footer">
      <a href="/"> Términos de uso</a>
      <a href="/">Declaración de privacidad</a>
      <a href="/">Centro de ayuda</a>
    </footer>
  </body>
</html>

CSS

body {
  margin: 0px;
  background-image: linear-gradient(90deg, #74ebd5 0%, #9face6 50%);
  font-family: "Poppins", sans-serif;
}

.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__img {
  width: 250px;
  margin-top: 5px;
  margin-left: 10px;
}

.footer {
  display: flex;
  align-items: center;
  height: 100px;
  width: 100%;
}

.footer a {
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  padding-left: 30px;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.mainError {
  height: 100%;
  width: 100%;
  margin-top: 250px;
  margin-bottom: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.mainError h1 {
  margin: 20px;
  font-size: 50px;
  color: white;
}

.animated {
  animation-duration: 4000ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation-name: pulse;
  animation-duration: 1000ms;
}

.mainError__404 {
  animation-name: pulse;
}

@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
  }
}

.mainError__hinge {
  animation-name: hinge;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Error 404</title>
  <link rel="stylesheet" href="./estilos/style.css">
</head>
<body>
  <header class="header">
    <img class="header__img" src="./estilos/img/logo-platzi-video-BW2.png" alt="Logo">
  </header>

  <seccion class="error">
    <div class="error__404">404</div>
    <p class="error__p">Página no encontrada</p>
    <button class="error__b">Volver al inicio</button>
  </seccion>


  <footer class="footer">
    <a href="#">Términos de uso</a>
    <a href="#">Declaración de privacidad</a>
    <a href="#">Centro de ayuda</a>
  </footer>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#42047e+0,07f49e+100 */
  background: #42047e; /* Old browsers */
  background: -moz-linear-gradient(
    left,
    #42047e 0%,
    #07f49e 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    left,
    #42047e 0%,
    #07f49e 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right,
    #42047e 0%,
    #07f49e 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42047e', endColorstr='#07f49e',GradientType=1 ); /* IE6-9 */
  font-family: "Gudea", sans-serif;
}

.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__img {
  width: 200px;
  margin-top: 9px;
  margin-left: 9px;
}

.error {
  display: flex;
  height: calc(100vh - 200px);
  color: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.error__404 {
  font-size: 5em;
  animation: pulso 3s normal;
}

.error__p {
  margin-top: 6px;
  font-size: 18px;
}

.error__b {
  border: none;
  border-radius: 20px;
  padding: 3px 8px;
  margin-top: 20px;
  cursor: pointer;
  background-color: rgba(255,255,255, 0.2);
  color: white;
  font-size: 14px;
  outline: none;
}



.footer {
  display: flex;
  align-items: flex-end;
  height: 100px;
  width: 100%;
  justify-content: center;
}

.footer a {
  color: white;
  cursor: pinter;
  font-size: 14px;
  padding-left: 30px;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

@keyframes pulso{
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

Me encantó como quedó mi animación, pero no sé cómo subirla en vídeo, así que les dejo mi código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error404</title>
</head>
<style>
body{
    margin: 0;        
    font-family: 'Mulish', sans-serif;
}
.header{
    background-color: #21c08b;
    color: white;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
}
.header__img {
    width: 200px;
    /* margin-top: 10px; */
    margin-left: 30px;
}
.error-code{
    background: linear-gradient(#21c08b, #ab88ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
    min-height: calc(100vh - 200px);
}
.error-code__container {
    color: white;
    font-size: 80px;
    margin: 0;
}
.error-code__container p {
    margin: 0;
    animation-name: error;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* transform: scale(1.4);     */
}
@keyframes error {
    0% {
        opacity: 0;
        transform: scale(.8) rotate(0deg);  
    }
    30%{
        opacity: 1;
        transform: scale(1.5) rotate(360deg);
    }
    80%{
        opacity: 1;
        transform: scale(1.5) rotate(360deg);
    }
    100% {
        opacity: 0;
        transform: scale(.8) rotate(0deg);
    }
}
.error-code h2 {
    color: white;
}
.footer {
    display: flex;
    align-items: center;
    height: 100px;
    width: 100%;
    background-color: #ab88ff;
    
}
.footer a {
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding-left: 30px;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
</style>
<body>
    <header class="header">
        <img  class="header__img" src="./logo-platzi-video-BW2.png" alt="Logo Platzi video">
    </header>
    <section class="error-code">
        <section class="error-code__container">
            <p>404</p>
        </section>
        <h2>Página no encontrada</h2>
    </section>
    <footer class="footer">
        <a href="/">Téminos de uso</a>
        <a href="/">Delcaración de privacidad</a>
        <a href="/">Centro de ayuda</a>
    </footer>  
</body>
</html>```

Pdta: Si alguno sabe cómo subir vídeos, les agradezco me puedan explicar. Gracias!

En caída libre…

Platzi necesita con urgencia una clase de animaciones de css

¿Qué les parece?

En conmemoración a SpaceX.

https://codepen.io/robinselmer/pen/vJjbOZ

Chequen este diseñador web.
A mi me gusto este mas

![](

Listo! de una vez que fuera Responsive:

Responsive:

Mi aporte…

Les recomiendo apoyase en https://lottiefiles.com/
Podrán encontrar miles de animaciones para cada cosa que necesitemos.
Es gratis y puedes controlar el comportamiento de cada animación junto con sus colores.
Solo copia y pega esto en tu código para ver un ejemplo de como funciona:

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_qymzokly.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

mi página de eror 404

Resultado:

Justo tenía algo guardado para este tipo de páginas ✨

Utilicé la etiqueta <pre> para contener el dibujo con caracteres.
El comentario <!-- prettier-ignore --> para evitar que la extensión Prettier formateara el dibujo.
Y utilicé la animación de pulse como decía el reto, me interesa bastante la trilogía de cursos de Animaciones y Transformaciones con CSS 🚀
Será el siguiente reto 💚

No es la mejor página de error, pero pues…

Les comparto mi reto:

Quizás no se ve, pero esta animado el “¡Lo sentimos!”

Reto completado:

Reto completado!!

Usando animacion Hinge

También les puedo recomendar Animate.css en está página hay muchas animaciones y las pueden integrar a lo que mas les guste.

Aun queda mucho por mejorar.

Quedo

No se como subir la imagen pero me ha encantado poder ponerle animación al 404.