Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes:$349
$259
Currency
Antes:$349
Ahorras:$90
COMIENZA AHORA
Curso Práctico de Maquetación y Animaciones con CSS

Clases del Curso Práctico de Maquetación y Animaciones con CSS

Instruido por:
Estefany Aguilar
Estefany Aguilar
Básico
2 horas de contenido
Ver la ruta de aprendizaje
Lego Superheroes: rediseño con microinteracciones
Proyecto del curso
Lego Superheroes: rediseño con microinteracciones

¡Diseña tus Lego SuperHéroes! Maqueta un rediseño de la página web de Lego Superheroes con animaciones web y microinteracciones.

Curso Práctico de Maquetación y Animaciones con CSS

Curso Práctico de Maquetación y Animaciones con CSS

Progreso del curso:0/12contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/12contenidos(0%)

Visión general y requisitos del curso

Material Thumbnail

Hagamos un landing con super poderes CSS

01:44 min

Material Thumbnail

Estructura del proyecto

09:48 min

Maquetación y animaciones con CSS

Material Thumbnail

Maquetación del loader

14:09 min

Material Thumbnail

Layout con CSS Grid

09:54 min

Material Thumbnail

Contenido principal

11:05 min

Material Thumbnail

Contenido lateral

17:47 min

Maquetación con JavaScript

Material Thumbnail

Cómo acceder al DOM con JavaScript

08:56 min

Material Thumbnail

Modal: evento click con JavaScript

08:53 min

Continúa aprendiendo

Material Thumbnail

¿Quieres aprender animaciones con JavaScript?

01:30 min

nuevosmás votadossin responder
Sura Naileth Cedeño Lopez
Sura Naileth Cedeño Lopez
Estudiante

Para los modales de los tres muñequitos lo hice así, pero sé que se puede hacer mejor, me ayudan por fis

<script>
    const modal = document.querySelector(".modal");
    const modal2 = document.querySelector("#modal2");
    const modal3 = document.querySelector("#modal3");
    const button1 = document.querySelector("#button1");
    const button2 = document.querySelector("#button2");
    const button3 = document.querySelector("#button3");
    const close = document.querySelector(".modal__content--close");
    const close2 = document.querySelector("#modal2 .modal__content--close");
    const close3 = document.querySelector("#modal3 .modal__content--close");

    button1.addEventListener("click", () => {
      modal.classList.remove("hidden");
      modal.classList.add("visible");
    });

    button2.addEventListener("click", () => {
      modal2.classList.remove("hidden");
      modal2.classList.add("visible");
    });

    button3.addEventListener("click", () => {
      modal3.classList.remove("hidden");
      modal3.classList.add("visible");
    });
    close.addEventListener("click", () => {
      modal.classList.add("hidden");
      modal.classList.remove("visible");
    });
    close2.addEventListener("click", () => {
      modal2.classList.add("hidden");
      modal2.classList.remove("visible");
    });

    close3.addEventListener("click", () => {
      modal3.classList.add("hidden");
      modal3.classList.remove("visible");
    });
  </script>
2
Lauro Iván Ibáñez Castellanos
Lauro Iván Ibáñez Castellanos
Estudiante

Una pregunta, de donde descargo el material?

1
demateu
demateu
Estudiante

Animaciones con Javascript, xiii! Cuando?

2
alveiro-monsalve
alveiro-monsalve
Estudiante

porq el script no me funciona si lo paso a un archivo aparte ?

ya he echo el src en el html y lo compruebo con un alert() pero no me funciona nada así

2
Ricardo Castro
Ricardo Castro
Estudiante

¿Por qué hace los estilos css en el archivo html?
¿No es mejor hacerlo en un archivo distinto?

2
vcentt-lopez
vcentt-lopez
Estudiante

Menciona “el curso pasado”, ¿alguien sabe cual es ese curso pasado?

3
Marcos Romero
Marcos Romero
Estudiante

El video me carga infinitamente y no veo nada u.u

1